richie-education 3.3.2-dev6 → 3.4.1-dev13

package/js/utils/download.ts

@@ -5,11 +5,13 @@ import { handle } from './errors/handle';
  *
  * @param downloadFunction, an api promise that return a File
  * @param newWindow, does it open in a new window or not
+ * @param filename, optional filename override; if provided, takes precedence over file.name
  * @returns boolean, true for success
  */
 export const browserDownloadFromBlob = async (
   downloadFunction: () => Promise<File>,
   newWindow: boolean = false,
+  filename?: string,
 ) => {
   try {
     const file = await downloadFunction();
@@ -24,7 +26,7 @@ export const browserDownloadFromBlob = async (
 
     const $link = document.createElement('a');
     $link.href = url;
-    $link.download = file.name;
+    $link.download = filename || file.name;
 
     const revokeObject = () => {
       // eslint-disable-next-line compat/compat

package/js/utils/errors/handle.spec.ts

@@ -19,12 +19,12 @@ jest.mock('@sentry/browser', () => ({
 
 describe('handle', () => {
   it('should initialize sentry', () => {
-    expect(Sentry.init).toBeCalledTimes(1);
-    expect(Sentry.setTag).toBeCalledTimes(1);
+    expect(Sentry.init).toHaveBeenCalledTimes(1);
+    expect(Sentry.setTag).toHaveBeenCalledTimes(1);
   });
 
   it('should report error to sentry', () => {
     handle(new Error('An error for test'));
-    expect(Sentry.captureException).toBeCalledTimes(1);
+    expect(Sentry.captureException).toHaveBeenCalledTimes(1);
   });
 });

package/js/utils/react-query/useSessionMutation/index.ts

@@ -1,4 +1,8 @@
-import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import type {
+  MutationFunctionContext,
+  UseMutationOptions,
+  UseMutationResult,
+} from '@tanstack/react-query';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 
@@ -18,13 +22,14 @@ export function useSessionMutation<TData = unknown, TVariables = void, TContext
     error: HttpError,
     variables: TVariables,
     context: TContext | undefined,
+    mutationContext: MutationFunctionContext,
   ) => {
-    if (error.code === HttpStatusCode.UNAUTHORIZED) {
+    if (error && error.code === HttpStatusCode.UNAUTHORIZED) {
       await queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
     }
 
     if (options?.onError) {
-      return options.onError(error, variables, context);
+      return options.onError(error, variables, context, mutationContext);
     }
   };
 

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

@@ -46,6 +46,7 @@ import {
   BatchOrderQuote,
   Relation,
   Agreement,
+  BatchOrderSeat,
 } from 'types/Joanie';
 import { Payment, PaymentMethod, PaymentProviders } from 'components/PaymentInterfaces/types';
 import { CourseStateFactory } from 'utils/test/factories/richie';
@@ -176,7 +177,7 @@ export const OrganizationFactory = factory((): Organization => {
     contact_phone: faker.phone.number(),
     address: AddressFactory().one(),
     abilities: {
-      can_submit_for_signature_batch_order: faker.datatype.boolean(),
+      can_manage_batch_order_agreement: faker.datatype.boolean(),
       confirm_bank_transfer: faker.datatype.boolean(),
       confirm_quote: faker.datatype.boolean(),
       delete: faker.datatype.boolean(),
@@ -214,12 +215,15 @@ export const BatchOrderQuoteFactory = factory((): BatchOrderQuote => {
     relation: RelationFactory().one(),
     payment_method: faker.helpers.arrayElement(Object.values(PaymentMethod)),
     contract_submitted: faker.datatype.boolean(),
-    nb_seats: faker.number.int({ min: 1, max: 100 }),
+    nb_seats: faker.number.int({ min: 10, max: 100 }),
+    seats_owned: faker.number.int({ min: 0, max: 10 }),
+    seats_to_own: faker.number.int({ min: 90, max: 100 }),
     available_actions: {
       confirm_quote: false,
       confirm_purchase_order: false,
       confirm_bank_transfer: false,
       submit_for_signature: false,
+      download_quote: false,
       next_action: null,
     },
   };
@@ -551,6 +555,8 @@ export const BatchOrderReadFactory = factory((): BatchOrderRead => {
     funding_entity: faker.company.name(),
     funding_amount: faker.number.int({ min: 100, max: 10000 }),
     offering: OfferingBatchOrderFactory().one(),
+    seats_owned: faker.number.int({ min: 1, max: 200 }),
+    seats_to_own: faker.number.int({ min: 1, max: 200 }),
   };
 });
 
@@ -678,3 +684,11 @@ export const SaleTunnelContextFactory = factory(
     setPaymentMode: noop,
   }),
 );
+
+export const BatchOrderSeatFactory = factory((): BatchOrderSeat => {
+  return {
+    id: faker.string.uuid(),
+    owner_name: null,
+    voucher: faker.string.alphanumeric(10),
+  };
+});

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { UserFactory } from 'utils/test/factories/richie';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '.';

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from './index';
 
@@ -25,8 +25,12 @@ export const Default: Story = {
     ),
     footer: (
       <>
-        <Button color="primary">Delete</Button>
-        <Button color="primary">Update</Button>
+        <Button color="brand" variant="primary">
+          Delete
+        </Button>
+        <Button color="brand" variant="primary">
+          Update
+        </Button>
       </>
     ),
   },
@@ -43,8 +47,12 @@ export const NoHeader: Story = {
     ),
     footer: (
       <>
-        <Button color="primary">Delete</Button>
-        <Button color="primary">Update</Button>
+        <Button color="brand" variant="primary">
+          Delete
+        </Button>
+        <Button color="brand" variant="primary">
+          Update
+        </Button>
       </>
     ),
   },

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

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

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

@@ -60,7 +60,8 @@ export const DashboardBreadcrumbs = () => {
         <RouterButton
           href={backPath}
           size="nano"
-          color="tertiary-text"
+          color="brand"
+          variant="tertiary"
           icon={<span className="material-icons">chevron_left</span>}
         >
           <FormattedMessage {...messages.back} />
@@ -69,7 +70,7 @@ export const DashboardBreadcrumbs = () => {
 
       {breadcrumbs.map((breadcrumb) => (
         <li key={breadcrumb.pathname}>
-          <RouterButton href={breadcrumb.pathname} size="nano" color="tertiary-text">
+          <RouterButton href={breadcrumb.pathname} size="nano" color="brand" variant="tertiary">
             {breadcrumb.name}
           </RouterButton>
         </li>

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

@@ -5,7 +5,14 @@ import { DashboardCard } from '.';
 describe('<DashboardCard/>', () => {
   it('opens and closes', async () => {
     render(
-      <DashboardCard header="My header" footer={<Button color="primary">Update</Button>}>
+      <DashboardCard
+        header="My header"
+        footer={
+          <Button color="brand" variant="primary">
+            Update
+          </Button>
+        }
+      >
         Content here
       </DashboardCard>,
     );
@@ -23,7 +30,11 @@ describe('<DashboardCard/>', () => {
       <DashboardCard
         defaultExpanded={false}
         header="My header"
-        footer={<Button color="primary">Update</Button>}
+        footer={
+          <Button color="brand" variant="primary">
+            Update
+          </Button>
+        }
       >
         Content here
       </DashboardCard>,

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { Button } from '@openfun/cunningham-react';
 import { DashboardBox } from '../DashboardBox';
 import { DashboardCard } from './index';
@@ -26,7 +26,11 @@ export const Default: Story = {
         </div>
       </div>
     ),
-    footer: <Button color="primary">Update</Button>,
+    footer: (
+      <Button color="brand" variant="primary">
+        Update
+      </Button>
+    ),
   },
 };
 
@@ -39,8 +43,12 @@ export const WithBoxes: Story = {
           header={<>Address used by default</>}
           footer={
             <>
-              <Button color="primary">Remove</Button>
-              <Button color="primary">Edit</Button>
+              <Button color="brand" variant="primary">
+                Remove
+              </Button>
+              <Button color="brand" variant="primary">
+                Edit
+              </Button>
             </>
           }
         >

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

@@ -64,7 +64,7 @@ export const DashboardCard = ({
       <header className="dashboard-card__header">
         <div>{header}</div>
         {expandable && (
-          <Button onClick={toggle} color="tertiary" size="small">
+          <Button onClick={toggle} color="brand" variant="tertiary" size="small">
             <Icon
               name={IconTypeEnum.CHEVRON_DOWN_OUTLINE}
               data-testid="dashboard-card__header__toggle"

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderAgreementInfo.tsx

@@ -0,0 +1,72 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { BatchOrderRead } from 'types/Joanie';
+import DownloadAgreementButton from 'components/DownloadAgreementButton';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { useOrganizationAgreement } from 'hooks/useOrganizationAgreements.tsx';
+import useDateFormat from 'hooks/useDateFormat';
+
+const messages = defineMessages({
+  title: {
+    id: 'batchOrder.agreement.title',
+    description: 'Step label for the agreement document in the batch order detail',
+    defaultMessage: 'Agreement',
+  },
+  organizationSignedOn: {
+    id: 'batchOrder.agreement.organizationSignedOn',
+    description: 'Label displayed once the organization has counter-signed the agreement',
+    defaultMessage: 'Signed by the organization on {date}.',
+  },
+  waitingOrganization: {
+    id: 'batchOrder.agreement.waitingOrganization',
+    description:
+      'Label displayed when the agreement is waiting for the organization counter-signature',
+    defaultMessage: 'Waiting for the organization to counter-sign the agreement.',
+  },
+});
+
+interface BatchOrderAgreementInfoProps {
+  batchOrder: BatchOrderRead;
+}
+
+export const BatchOrderAgreementInfo = ({ batchOrder }: BatchOrderAgreementInfoProps) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+  const {
+    item: agreement,
+    states: { isFetched, error },
+  } = useOrganizationAgreement(batchOrder.contract_id!, {
+    organization_id: batchOrder.organization.id,
+  });
+
+  if (!isFetched || error || !agreement) {
+    return null;
+  }
+
+  const signedOn = agreement.organization_signed_on;
+
+  return (
+    <DashboardSubItem
+      title={intl.formatMessage(messages.title)}
+      footer={
+        <div className="content">
+          {signedOn ? (
+            <>
+              <p>
+                <FormattedMessage
+                  {...messages.organizationSignedOn}
+                  values={{ date: formatDate(signedOn) }}
+                />
+              </p>
+              <DownloadAgreementButton
+                organizationId={batchOrder.organization.id}
+                agreementId={batchOrder.contract_id!}
+              />
+            </>
+          ) : (
+            <FormattedMessage {...messages.waitingOrganization} />
+          )}
+        </div>
+      }
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/BatchOrderPaymentManager.tsx

@@ -48,7 +48,7 @@ export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProp
           footer={
             <div className="content">
               <FormattedMessage {...messages.batchOrderPayment} />
-              <Button size="small" color="primary" onClick={retryModal.open}>
+              <Button size="small" color="brand" variant="primary" onClick={retryModal.open}>
                 <FormattedMessage
                   {...messages.paymentNeededButton}
                   values={{

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/index.tsx

@@ -172,7 +172,8 @@ export const BatchOrderPaymentModal = ({ batchOrder, ...props }: Props) => {
         hideCloseButton={state === ComponentStates.LOADING}
         actions={
           <Button
-            color="primary"
+            color="brand"
+            variant="primary"
             size="small"
             fullWidth={true}
             onClick={pay}

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderSeatInfo.spec.tsx

@@ -0,0 +1,114 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { BatchOrderReadFactory, BatchOrderSeatFactory } from 'utils/test/factories/joanie';
+import { BatchOrderState } from 'types/Joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { expectBannerError } from 'utils/test/expectBanner';
+import { BatchOrderSeatInfo } from './BatchOrderSeatInfo';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<BatchOrderSeatInfo />', () => {
+  setupJoanieSession();
+
+  const paginatedResponse = (results: object[], count?: number) => ({
+    results,
+    count: count ?? results.length,
+    next: null,
+    previous: null,
+  });
+
+  it('renders enrollment progress and seat list, and searches by query param', async () => {
+    const ownedSeat = BatchOrderSeatFactory({ owner_name: 'Alice Martin' }).one();
+    const voucherSeat = BatchOrderSeatFactory().one();
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 10,
+      seats_owned: 1,
+      seats_to_own: 9,
+    }).one();
+
+    fetchMock.get(
+      `begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`,
+      paginatedResponse([ownedSeat, voucherSeat], 10),
+    );
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    expect(await screen.findByText('1/10 enrolled participants')).toBeVisible();
+    expect(await screen.findByText('Alice Martin')).toBeVisible();
+    expect(await screen.findByText(voucherSeat.voucher!)).toBeVisible();
+
+    const user = userEvent.setup();
+    await user.type(screen.getByRole('textbox'), 'Alice');
+
+    await waitFor(() => {
+      const urls = fetchMock
+        .calls(`begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`)
+        .map(([url]) => url);
+      expect(urls.some((url) => url.includes('query=Alice'))).toBe(true);
+    });
+  });
+
+  it('loads more seats when clicking the load more button', async () => {
+    const firstPage = BatchOrderSeatFactory().many(10);
+    const secondPage = BatchOrderSeatFactory().many(5);
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 15,
+      seats_owned: 15,
+      seats_to_own: 0,
+    }).one();
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=1&page_size=10`,
+      { results: firstPage, count: 15, next: 'next-url', previous: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=2&page_size=10`,
+      { results: secondPage, count: 15, next: null, previous: 'prev-url' },
+    );
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    expect(await screen.findByText(firstPage[0].owner_name ?? firstPage[0].voucher!)).toBeVisible();
+    expect(screen.queryByText(secondPage[0].owner_name ?? secondPage[0].voucher!)).toBeNull();
+    expect(screen.getByRole('button', { name: 'Load 5 more' })).toBeVisible();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Load 5 more' }));
+
+    expect(
+      await screen.findByText(secondPage[0].owner_name ?? secondPage[0].voucher!),
+    ).toBeVisible();
+    expect(screen.queryByText('Load 5 more')).toBeNull();
+    expect(screen.getByText(firstPage[0].owner_name ?? firstPage[0].voucher!)).toBeVisible();
+  });
+
+  it('shows an error banner when the seats API fails', async () => {
+    const batchOrder = BatchOrderReadFactory({
+      state: BatchOrderState.COMPLETED,
+      nb_seats: 10,
+      seats_owned: 1,
+      seats_to_own: 9,
+    }).one();
+
+    fetchMock.get(`begin:https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/`, {
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+    });
+
+    render(<BatchOrderSeatInfo batchOrder={batchOrder} />);
+
+    await expectBannerError('An error occurred while fetching resources. Please retry later.');
+  });
+});

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderSeatInfo.tsx

@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, Input } from '@openfun/cunningham-react';
+import { Icon, IconTypeEnum } from 'components/Icon';
+import Banner, { BannerType } from 'components/Banner';
+import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
+import { useBatchOrderSeats } from 'hooks/useBatchOrder';
+import DownloadBatchOrderSeatsButton from 'components/DownloadBatchOrderSeatsButton';
+import { BatchOrderRead, BatchOrderSeat } from 'types/Joanie';
+import { batchOrderSeatInfoMessages } from './batchOrderSeatInfoMessages';
+
+const messages = defineMessages({
+  enrollmentManagement: {
+    id: 'batchOrder.enrollmentManagement.title',
+    description: 'Title for enrollment management section',
+    defaultMessage: 'Enrollment',
+  },
+});
+
+const ITEMS_PER_PAGE = 10;
+
+interface BatchOrderSeatInfoProps {
+  batchOrder: BatchOrderRead;
+}
+
+export const BatchOrderSeatInfo = ({ batchOrder }: BatchOrderSeatInfoProps) => {
+  const intl = useIntl();
+  const [query, setQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [allSeats, setAllSeats] = useState<BatchOrderSeat[]>([]);
+
+  const seatsOwnedCount = batchOrder.seats_owned ?? 0;
+
+  const {
+    items: seats,
+    meta,
+    states,
+  } = useBatchOrderSeats(
+    {
+      batch_order_id: batchOrder.id,
+      query: query || undefined,
+      page,
+      page_size: ITEMS_PER_PAGE,
+    },
+    { enabled: !!batchOrder.id },
+  );
+
+  useEffect(() => {
+    if (page === 1) {
+      setAllSeats(seats);
+    } else if (seats.length > 0) {
+      setAllSeats((prev) => [...prev, ...seats]);
+    }
+  }, [seats]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [query]);
+
+  const totalCount = meta?.pagination?.count ?? 0;
+  const remainingCount = Math.min(ITEMS_PER_PAGE, totalCount - allSeats.length);
+
+  if (
+    !batchOrder.nb_seats ||
+    batchOrder.seats_owned === undefined ||
+    batchOrder.seats_to_own === undefined
+  ) {
+    return null;
+  }
+
+  return (
+    <DashboardSubItem
+      title={intl.formatMessage(messages.enrollmentManagement)}
+      footer={
+        <div className="content">
+          <div className="enrollment-progress">
+            <span className="dashboard-item__label">
+              {intl.formatMessage(batchOrderSeatInfoMessages.enrolledParticipants, {
+                seats_owned: seatsOwnedCount,
+                nb_seats: batchOrder.nb_seats,
+              })}
+            </span>
+            <div className="enrollment-progress__bar">
+              <div
+                className="enrollment-progress__bar__fill"
+                style={{ width: `${(seatsOwnedCount / batchOrder.nb_seats) * 100}%` }}
+              />
+            </div>
+          </div>
+          {states.error && <Banner message={states.error} type={BannerType.ERROR} />}
+          <div className="enrollment-nested-section__content">
+            <Input
+              className="enrollment-search"
+              label={intl.formatMessage(batchOrderSeatInfoMessages.searchPlaceholder)}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              rightIcon={<Icon name={IconTypeEnum.MAGNIFYING_GLASS} size="small" />}
+            />
+            {allSeats.length === 0 && query ? (
+              <FormattedMessage {...batchOrderSeatInfoMessages.noResults} />
+            ) : (
+              <>
+                <ul className="enrollment-list">
+                  {allSeats.map((seat) => (
+                    <li key={seat.id}>{seat.owner_name ?? seat.voucher}</li>
+                  ))}
+                </ul>
+                {remainingCount > 0 && (
+                  <Button
+                    className="enrollment-load-more"
+                    color="brand"
+                    variant="secondary"
+                    size="small"
+                    onClick={() => setPage((p) => p + 1)}
+                    disabled={states.fetching}
+                  >
+                    {intl.formatMessage(batchOrderSeatInfoMessages.loadMore, {
+                      count: remainingCount,
+                    })}
+                  </Button>
+                )}
+              </>
+            )}
+          </div>
+          <DownloadBatchOrderSeatsButton
+            batchOrderId={batchOrder.id}
+            productTitle={batchOrder.offering?.product.title ?? ''}
+          />
+        </div>
+      }
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/DashboardBatchOrderSubItems.tsx

@@ -1,8 +1,10 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { PaymentMethod } from 'components/PaymentInterfaces/types';
-import { BatchOrderRead } from 'types/Joanie';
+import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
 import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
+import { BatchOrderSeatInfo } from './BatchOrderSeatInfo';
+import { BatchOrderAgreementInfo } from './BatchOrderAgreementInfo';
 
 const messages = defineMessages({
   stepCompany: {
@@ -144,6 +146,12 @@ const DashboardItemField = ({
 export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchOrderRead }) => {
   const intl = useIntl();
 
+  const displaySeatsInfo =
+    batchOrder.state === BatchOrderState.COMPLETED &&
+    !!batchOrder.nb_seats &&
+    batchOrder.seats_owned !== undefined &&
+    batchOrder.seats_to_own !== undefined;
+
   const items = [
     <DashboardSubItem
       key="company"
@@ -312,5 +320,13 @@ export const DashboardBatchOrderSubItems = ({ batchOrder }: { batchOrder: BatchO
     );
   }
 
+  if (batchOrder.contract_id) {
+    items.push(<BatchOrderAgreementInfo key="agreement" batchOrder={batchOrder} />);
+  }
+
+  if (displaySeatsInfo) {
+    items.push(<BatchOrderSeatInfo key="enrollment-management" batchOrder={batchOrder} />);
+  }
+
   return <DashboardSubItemsList subItems={items} />;
 };

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/batchOrderSeatInfoMessages.ts

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export const batchOrderSeatInfoMessages = defineMessages({
+  enrolledParticipants: {
+    id: 'batchOrder.enrollmentManagement.enrolledParticipants',
+    description: 'Progress label showing enrolled participants out of total seats',
+    defaultMessage: '{seats_owned}/{nb_seats} enrolled participants',
+  },
+  searchPlaceholder: {
+    id: 'batchOrder.enrollmentManagement.searchPlaceholder',
+    description: 'Placeholder for the seat search input (student name or voucher)',
+    defaultMessage: 'Student name',
+  },
+  noResults: {
+    id: 'batchOrder.enrollmentManagement.noResults',
+    description: 'Message shown when the student search returns no results',
+    defaultMessage: 'No student matches your search.',
+  },
+  loadMore: {
+    id: 'batchOrder.enrollmentManagement.loadMore',
+    description: 'Button to load more seats',
+    defaultMessage: 'Load {count} more',
+  },
+});