richie-education 3.4.0 → 3.4.1-dev13

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

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

@@ -0,0 +1,136 @@
+import { faker } from '@faker-js/faker';
+import fetchMock from 'fetch-mock';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { useDownloadAgreement } from 'hooks/useDownloadAgreement/index';
+import { handle } from 'utils/errors/handle';
+import { SessionProvider } from 'contexts/SessionContext';
+import { Deferred } from 'utils/test/deferred';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+
+jest.mock('utils/errors/handle');
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+const mockHandle = handle as jest.MockedFn<typeof handle>;
+
+describe('useDownloadAgreement', () => {
+  beforeEach(() => {
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+  });
+
+  beforeAll(() => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn();
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    HTMLAnchorElement.prototype.click = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>{children}</SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  it('downloads the agreement PDF', async () => {
+    const organization = OrganizationFactory().one();
+    const agreementId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/organizations/${organization.id}/agreements/${agreementId}/download/`;
+    const deferred = new Deferred();
+    fetchMock.get(DOWNLOAD_URL, deferred.promise);
+
+    const { result } = renderHook(() => useDownloadAgreement(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+    expect(result.current.loading).toBe(false);
+
+    act(() => {
+      result.current.download(organization.id, agreementId);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['%PDF-1.4']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="Convention_de_formation.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+      expect(result.current.loading).toBe(false);
+    });
+
+    fireEvent.blur(window);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles an error if agreement download request fails', async () => {
+    const organization = OrganizationFactory().one();
+    const agreementId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/organizations/${organization.id}/agreements/${agreementId}/download/`;
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
+
+    const { result } = renderHook(() => useDownloadAgreement(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    expect(mockHandle).not.toHaveBeenCalled();
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      result.current.download(organization.id, agreementId);
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      expect(mockHandle).toHaveBeenNthCalledWith(1, new Error('Unauthorized'));
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+      expect(result.current.loading).toBe(false);
+    });
+  });
+});

package/js/hooks/useDownloadAgreement/index.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
+
+export const useDownloadAgreement = () => {
+  const [loading, setLoading] = useState(false);
+  const API = useJoanieApi();
+
+  return {
+    download: async (organizationId: string, agreementId: string) => {
+      setLoading(true);
+      try {
+        await browserDownloadFromBlob(() =>
+          API.organizations.agreements.download({
+            organization_id: organizationId,
+            id: agreementId,
+          }),
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    loading,
+  };
+};