richie-education 3.4.0 → 3.4.1-dev14

package/.storybook/main.js

@@ -1,12 +1,17 @@
 import { dirname, join } from "path";
+import { createRequire } from "module";
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 
-const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-module.exports = {
-  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../js/**/*.stories.@(js|jsx|ts|tsx)'],
+const require = createRequire(import.meta.url);
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+export default {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)', '../js/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('@storybook/addon-interactions'),
     getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
   ],
   framework: {
@@ -23,9 +28,7 @@ module.exports = {
     from: '../../richie/apps/core/static',
     to: '/static',
   }, '../../richie/apps/core/templates/richie'],
-  webpackFinal: async (config, {
-    configType,
-  }) => {
+  webpackFinal: async (config, { configType }) => {
     config.resolve.plugins = [new TsconfigPathsPlugin()];
     return config;
   },
@@ -33,7 +36,3 @@ module.exports = {
     autodocs: false,
   },
 };
-
-function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, "package.json")));
-}

package/js/api/joanie.ts

@@ -107,6 +107,10 @@ export const getRoutes = () => {
         submit_for_payment: {
           create: `${baseUrl}/batch-orders/:id/submit-for-payment/`,
         },
+        seats: {
+          get: `${baseUrl}/batch-orders/:batch_order_id/seats/`,
+        },
+        seats_export: `${baseUrl}/batch-orders/:id/seats-export/`,
       },
       certificates: {
         download: `${baseUrl}/certificates/:id/download/`,
@@ -161,6 +165,7 @@ export const getRoutes = () => {
       },
       agreements: {
         get: `${baseUrl}/organizations/:organization_id/agreements/:id/`,
+        download: `${baseUrl}/organizations/:organization_id/agreements/:id/download/`,
       },
     },
     courses: {
@@ -354,6 +359,17 @@ const API = (): Joanie.API => {
             ).then(checkStatus);
           },
         },
+        seats: {
+          get: async (filters?: Joanie.BatchOrderSeatsQueryFilters) => {
+            return fetchWithJWT(buildApiUrl(ROUTES.user.batchOrders.seats.get, filters)).then(
+              checkStatus,
+            );
+          },
+        },
+        seats_export: async (id: string): Promise<File> =>
+          fetchWithJWT(ROUTES.user.batchOrders.seats_export.replace(':id', id))
+            .then(checkStatus)
+            .then(getFileFromResponse),
       },
       enrollments: {
         create: async (payload) =>
@@ -545,6 +561,10 @@ const API = (): Joanie.API => {
             method: 'GET',
           }).then(checkStatus);
         },
+        download: async (filters: { organization_id: string; id: string }): Promise<File> =>
+          fetchWithJWT(buildApiUrl(ROUTES.organizations.agreements.download, filters))
+            .then(checkStatus)
+            .then(getFileFromResponse),
       },
     },
     courses: {

package/js/api/lms/index.spec.ts

@@ -1,7 +1,14 @@
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
+import { location } from 'utils/indirection/window';
 import LMSHandler from '.';
 
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    pathname: '/courses/a-test-course/',
+    assign: jest.fn(),
+  },
+}));
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
@@ -16,6 +23,12 @@ jest.mock('utils/context', () => ({
         endpoint: 'https://edx.endpoint/api',
         course_regexp: '.*edx.org/.*',
       },
+      {
+        backend: 'openedx-hawthorn',
+        endpoint: 'https://nau.endpoint/api',
+        course_regexp: '.*nau.org/.*',
+        next_url: 'richie-nau',
+      },
     ],
   }).one(),
 }));
@@ -24,6 +37,10 @@ const mockHandle: jest.Mock<typeof handle> = handle as any;
 jest.mock('utils/errors/handle');
 
 describe('API LMS', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('returns OpenEdX API if url that match edx selector is provided', () => {
     const api = LMSHandler('https://edx.org/courses/a-test-course');
     expect(api).toBeDefined();
@@ -42,4 +59,20 @@ describe('API LMS', () => {
       new Error('No LMS Backend found for https://unknown.org/course/a-test-course.'),
     );
   });
+
+  it('uses default "richie" next prefix for openedx-hawthorn without next_url configured', () => {
+    const api = LMSHandler('https://edx.org/courses/a-test-course');
+    api.user.login();
+    expect(location.assign).toHaveBeenCalledWith(
+      `https://edx.endpoint/api/login?next=richie${location.pathname}`,
+    );
+  });
+
+  it('uses configured next_url prefix for openedx-hawthorn with next_url set', () => {
+    const api = LMSHandler('https://nau.org/courses/a-test-course');
+    api.user.login();
+    expect(location.assign).toHaveBeenCalledWith(
+      `https://nau.endpoint/api/login?next=richie-nau${location.pathname}`,
+    );
+  });
 });

package/js/api/lms/index.ts

@@ -15,7 +15,7 @@ const LmsAPIHandler = (url: string): APILms => {
     case APIBackend.OPENEDX_DOGWOOD:
       return OpenEdxDogwoodApiInterface(api);
     case APIBackend.OPENEDX_HAWTHORN:
-      return OpenEdxHawthornApiInterface(api);
+      return OpenEdxHawthornApiInterface(api, { routes: {}, nextURL: api.next_url });
   }
 
   const error = new Error(`No LMS Backend found for ${url}.`);

package/js/api/lms/openedx-hawthorn.spec.ts

@@ -3,10 +3,17 @@ import { faker } from '@faker-js/faker';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { handle } from 'utils/errors/handle';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
+import { location } from 'utils/indirection/window';
 import context from 'utils/context';
 import API from './openedx-hawthorn';
 
 jest.mock('utils/errors/handle');
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    pathname: '/courses/a-test-course/',
+    assign: jest.fn(),
+  },
+}));
 jest.mock('utils/context', () => ({
   __esModule: true,
   default: mockRichieContextFactory({
@@ -45,6 +52,48 @@ describe('OpenEdX Hawthorn API', () => {
     });
   });
 
+  describe('user', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    describe('login', () => {
+      it('redirects to login with default "richie" next prefix when nextURL is not set', () => {
+        const api = API(LMSConf);
+        api.user.login();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/login?next=richie${location.pathname}`,
+        );
+      });
+
+      it('redirects to login with custom next prefix when nextURL option is provided', () => {
+        const api = API(LMSConf, { routes: {}, nextURL: 'richie-nau' });
+        api.user.login();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/login?next=richie-nau${location.pathname}`,
+        );
+      });
+    });
+
+    describe('register', () => {
+      it('redirects to register with default "richie" next prefix when nextURL is not set', () => {
+        const api = API(LMSConf);
+        api.user.register();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/register?next=richie${location.pathname}`,
+        );
+      });
+
+      it('redirects to register with custom next prefix when nextURL option is provided', () => {
+        const api = API(LMSConf, { routes: {}, nextURL: 'richie-ap' });
+        api.user.register();
+        expect(location.assign).toHaveBeenCalledWith(
+          `${EDX_ENDPOINT}/register?next=richie-ap${location.pathname}`,
+        );
+      });
+    });
+  });
+
   describe('enrollment', () => {
     beforeEach(() => {
       courseId = faker.string.uuid();

package/js/api/lms/openedx-hawthorn.ts

@@ -20,6 +20,8 @@ import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
  */
 
 const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions): APILms => {
+  const nextURL = options?.nextURL ?? 'richie';
+
   const extractCourseIdFromUrl = (url: string): Maybe<Nullable<string>> => {
     const matches = url.match((APIConf as LMSBackend).course_regexp);
     return matches && matches[1] ? matches[1] : null;
@@ -61,8 +63,9 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
         / ! \ Prefix next param with richie.
         In this way, OpenEdX Nginx conf knows that we want to go back to richie app after login/redirect
       */
-      login: () => location.assign(`${ROUTES.user.login}?next=richie${location.pathname}`),
-      register: () => location.assign(`${ROUTES.user.register}?next=richie${location.pathname}`),
+      login: () => location.assign(`${ROUTES.user.login}?next=${nextURL}${location.pathname}`),
+      register: () =>
+        location.assign(`${ROUTES.user.register}?next=${nextURL}${location.pathname}`),
       logout: async () => {
         await fetch(ROUTES.user.logout, {
           mode: 'no-cors',

package/js/api/utils.ts

@@ -16,11 +16,12 @@ export async function getFileFromResponse(response: Response): Promise<File> {
 }
 
 export function getResponseBody(response: Response) {
-  if (response.headers.get('Content-Type') === 'application/json') {
+  const contentType = (response.headers.get('Content-Type') || '').split(';')[0].trim();
+  if (contentType === 'application/json') {
     return response.json();
   }
-  const fileType = ['application/pdf', 'application/zip'];
-  if (fileType.includes(response.headers.get('Content-Type') || '')) {
+  const fileType = ['application/pdf', 'application/zip', 'text/csv'];
+  if (fileType.includes(contentType)) {
     return new Promise((resolve) => resolve(response));
   }
   return response.text();

package/js/components/DownloadAgreementButton/index.tsx

@@ -0,0 +1,51 @@
+import { useId } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useDownloadAgreement } from 'hooks/useDownloadAgreement';
+
+const messages = defineMessages({
+  download: {
+    defaultMessage: 'Download agreement',
+    description: 'Label for the button to download a signed agreement PDF',
+    id: 'components.DownloadAgreementButton.download',
+  },
+  generating: {
+    defaultMessage: 'Downloading...',
+    description: 'Accessible label displayed while agreement PDF is being downloaded.',
+    id: 'components.DownloadAgreementButton.generating',
+  },
+});
+
+interface DownloadAgreementButtonProps {
+  organizationId: string;
+  agreementId: string;
+}
+
+const DownloadAgreementButton = ({ organizationId, agreementId }: DownloadAgreementButtonProps) => {
+  const { download, loading } = useDownloadAgreement();
+  const labelId = useId();
+
+  return (
+    <Button
+      size="small"
+      color="brand"
+      variant="primary"
+      className="dashboard-item__action-button"
+      disabled={loading}
+      onClick={() => download(organizationId, agreementId)}
+    >
+      {loading ? (
+        <Spinner theme="primary" aria-labelledby={labelId}>
+          <span id={labelId}>
+            <FormattedMessage {...messages.generating} />
+          </span>
+        </Spinner>
+      ) : (
+        <FormattedMessage {...messages.download} />
+      )}
+    </Button>
+  );
+};
+
+export default DownloadAgreementButton;

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

@@ -0,0 +1,46 @@
+import { buildFilename, sanitizeForFilename } from '.';
+
+describe('sanitizeForFilename', () => {
+  it('replaces spaces with underscores', () => {
+    expect(sanitizeForFilename('Formation React')).toBe('Formation_React');
+  });
+
+  it('removes diacritics', () => {
+    expect(sanitizeForFilename('Développement web')).toBe('Developpement_web');
+  });
+
+  it('removes special characters', () => {
+    expect(sanitizeForFilename('C++ / Python')).toBe('C_Python');
+  });
+
+  it('preserves hyphens', () => {
+    expect(sanitizeForFilename('Formation React - Advanced')).toBe('Formation_React_-_Advanced');
+  });
+
+  it('trims leading and trailing spaces', () => {
+    expect(sanitizeForFilename('  Formation  ')).toBe('Formation');
+  });
+});
+
+describe('buildFilename', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2026-04-15T09:30:00Z'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('builds the expected filename', () => {
+    expect(buildFilename('seats', 'Formation React')).toBe(
+      'seats_Formation_React_2026-04-15_09-30.csv',
+    );
+  });
+
+  it('sanitizes the product title in the filename', () => {
+    expect(buildFilename('seats', 'Développement web avancé')).toBe(
+      'seats_Developpement_web_avance_2026-04-15_09-30.csv',
+    );
+  });
+});

package/js/components/DownloadBatchOrderSeatsButton/index.tsx

@@ -0,0 +1,80 @@
+import { useId } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useDownloadBatchOrderSeats } from 'hooks/useDownloadBatchOrderSeats';
+
+const messages = defineMessages({
+  download: {
+    defaultMessage: 'Export CSV',
+    description: 'Label for the button to export batch order seats as CSV',
+    id: 'components.DownloadBatchOrderSeatsButton.download',
+  },
+  generating: {
+    defaultMessage: 'Generating export...',
+    description: 'Accessible label displayed while CSV export is being generated.',
+    id: 'components.DownloadBatchOrderSeatsButton.generating',
+  },
+  seats: {
+    defaultMessage: 'Seats',
+    description: 'Text displayed for seats value in batch order',
+    id: 'batchOrder.seats',
+  },
+});
+
+export const sanitizeForFilename = (str: string) =>
+  str
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-zA-Z0-9\s-]/g, '')
+    .trim()
+    .replace(/\s+/g, '_');
+
+export const buildFilename = (prefix: string, productTitle: string) => {
+  const now = new Date();
+  const date = `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, '0')}-${String(now.getUTCDate()).padStart(2, '0')}`;
+  const time = `${String(now.getUTCHours()).padStart(2, '0')}-${String(now.getUTCMinutes()).padStart(2, '0')}`;
+  return `${prefix}_${sanitizeForFilename(productTitle)}_${date}_${time}.csv`;
+};
+
+interface DownloadBatchOrderSeatsButtonProps {
+  batchOrderId: string;
+  productTitle: string;
+}
+
+const DownloadBatchOrderSeatsButton = ({
+  batchOrderId,
+  productTitle,
+}: DownloadBatchOrderSeatsButtonProps) => {
+  const { download, loading } = useDownloadBatchOrderSeats();
+  const labelId = useId();
+  const intl = useIntl();
+
+  const handleClick = () => {
+    const prefix = intl.formatMessage(messages.seats);
+    download(batchOrderId, buildFilename(prefix, productTitle));
+  };
+
+  return (
+    <Button
+      size="small"
+      color="brand"
+      variant="primary"
+      className="dashboard-item__action-button"
+      disabled={loading}
+      onClick={handleClick}
+    >
+      {loading ? (
+        <Spinner theme="primary" aria-labelledby={labelId}>
+          <span id={labelId}>
+            <FormattedMessage {...messages.generating} />
+          </span>
+        </Spinner>
+      ) : (
+        <FormattedMessage {...messages.download} />
+      )}
+    </Button>
+  );
+};
+
+export default DownloadBatchOrderSeatsButton;

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup.tsx

@@ -96,7 +96,7 @@ export const SaleTunnelInformationGroup = () => {
   );
 };
 
-const EMAIL_REGEX = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/;
+const EMAIL_REGEX = /^[\w.+\-]+@([\w-]+\.)+[\w-]{2,4}$/;
 
 export const validationSchema = Yup.object().shape({
   offering_id: Yup.string().required(),

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

@@ -20,7 +20,7 @@ const messages = defineMessages({
   },
   successDetailMessage: {
     defaultMessage:
-      'You will be able to start your training once the first installment will be paid.',
+      'You’ll be able to start your training once the first installment has been paid, or once access opens if no payment is required.',
     description: 'Text to explain when the user will be able to start its training.',
     id: 'components.SaleTunnelSuccess.successDetailMessage',
   },

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

@@ -203,6 +203,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
   };
 
   const walkthroughMessages = useMemo(() => {
+    if (batchOrder) return;
     if (product.contract_definition && product.price > 0) {
       return messages.walkthroughToSignAndSavePayment;
     } else if (product.contract_definition && product.price === 0) {
@@ -210,7 +211,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     } else if (!product.contract_definition && product.price > 0 && needsPayment) {
       return messages.walkthroughToSavePayment;
     }
-  }, [product, creditCard, needsPayment]);
+  }, [product, creditCard, needsPayment, batchOrder]);
 
   useEffect(() => {
     if (order) nextStep();

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

@@ -210,11 +210,11 @@ describe('SaleTunnel', () => {
     await user.type($lastName, 'Doe');
     await user.type($firstName, 'John');
     await user.type($role, 'HR');
-    await user.type($email, 'john.doe@fun-mooc.com');
+    await user.type($email, 'john.doe+admin@fun-mooc.com');
     await user.type($phone, '+338203920103');
 
     expect($lastName).toHaveValue('Doe');
-    expect($email).toHaveValue('john.doe@fun-mooc.com');
+    expect($email).toHaveValue('john.doe+admin@fun-mooc.com');
 
     // Signatory step
     await user.click(screen.getByRole('button', { name: 'Next' }));
@@ -227,7 +227,7 @@ describe('SaleTunnel', () => {
     await user.type($signatoryLastName, 'Doe');
     await user.type($signatoryFirstName, 'John');
     await user.type($signatoryRole, 'CEO');
-    await user.type($signatoryEmail, 'john.doe@fun-mooc.com');
+    await user.type($signatoryEmail, 'john.doe+ceo@fun-mooc.com');
     await user.type($signatoryPhone, '+338203920103');
 
     // Participants step
@@ -298,12 +298,12 @@ describe('SaleTunnel', () => {
       administrative_lastname: 'Doe',
       administrative_firstname: 'John',
       administrative_profession: 'HR',
-      administrative_email: 'john.doe@fun-mooc.com',
+      administrative_email: 'john.doe+admin@fun-mooc.com',
       administrative_telephone: '+338203920103',
       signatory_lastname: 'Doe',
       signatory_firstname: 'John',
       signatory_profession: 'CEO',
-      signatory_email: 'john.doe@fun-mooc.com',
+      signatory_email: 'john.doe+ceo@fun-mooc.com',
       signatory_telephone: '+338203920103',
       nb_seats: '13',
       payment_method: PaymentMethod.PURCHASE_ORDER,

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

@@ -404,7 +404,7 @@ describe('SaleTunnel', () => {
     await screen.findByTestId('generic-sale-tunnel-success-step');
     screen.getByText('Subscription confirmed!');
     screen.getByText(
-      /your order has been successfully registered\.you will be able to start your training once the first installment will be paid\./i,
+      /you’ll be able to start your training once the first installment has been paid, or once access opens if no payment is required\./i,
     );
     screen.getByRole('link', { name: 'Close' });
 

package/js/hooks/useBatchOrder/index.tsx

@@ -1,7 +1,13 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { ResourcesQuery, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-import { API, BatchOrderQueryFilters, BatchOrderRead } from 'types/Joanie';
+import {
+  API,
+  BatchOrderQueryFilters,
+  BatchOrderRead,
+  BatchOrderSeat,
+  BatchOrderSeatsQueryFilters,
+} from 'types/Joanie';
 
 const messages = defineMessages({
   errorCreate: {
@@ -34,3 +40,17 @@ export const useBatchOrdersActions = () => {
     submitForPayment,
   };
 };
+
+const seatsProps: UseResourcesProps<
+  BatchOrderSeat,
+  BatchOrderSeatsQueryFilters,
+  API['user']['batchOrders']['seats']
+> = {
+  queryKey: ['batchOrders', 'seats'],
+  apiInterface: () => useJoanieApi().user.batchOrders.seats,
+  session: true,
+};
+
+export const useBatchOrderSeats = useResources<BatchOrderSeat, BatchOrderSeatsQueryFilters>(
+  seatsProps,
+);