richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -0,0 +1,26 @@
+import { FormattedMessage, defineMessages } from 'react-intl';
+
+import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';
+import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
+import TeacherDashboardContracts from '../TeacherDashboardContracts';
+
+const messages = defineMessages({
+  pageTitle: {
+    defaultMessage: 'Contracts',
+    description: "Use for the page title of the course's contracts page",
+    id: 'pages.TeacherDashboardCourseContractsLayout.pageTitle',
+  },
+});
+
+export const TeacherDashboardCourseContractsLayout = () => {
+  return (
+    <DashboardLayout sidebar={<TeacherDashboardCourseSidebar />}>
+      <div className="dashboard__page_title_container">
+        <h1 className="dashboard__page_title">
+          <FormattedMessage {...messages.pageTitle} />
+        </h1>
+      </div>
+      <TeacherDashboardContracts />
+    </DashboardLayout>
+  );
+};

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

@@ -0,0 +1,26 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+
+import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
+import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';
+import TeacherDashboardContracts from '../TeacherDashboardContracts';
+
+const messages = defineMessages({
+  pageTitle: {
+    defaultMessage: 'Contracts',
+    description: 'Use for the page title of the organization contracts area',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.pageTitle',
+  },
+});
+
+export const TeacherDashboardOrganizationContractsLayout = () => {
+  return (
+    <DashboardLayout sidebar={<TeacherDashboardOrganizationSidebar />}>
+      <div className="dashboard__page_title_container">
+        <h1 className="dashboard__page_title">
+          <FormattedMessage {...messages.pageTitle} />
+        </h1>
+      </div>
+      <TeacherDashboardContracts />
+    </DashboardLayout>
+  );
+};

package/js/pages/TeacherDashboardContractsLayout/components/BulkDownloadContractButton/index.spec.tsx

@@ -0,0 +1,136 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ContractDownloadStatus } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive';
+
+import BulkDownloadContractButton from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+let mockDownloadContractArchive = jest.fn(() => Promise<void>);
+let mockCreateContractArchive = jest.fn(() => Promise<void>);
+let mockDownloadContractArchiveStatus: ContractDownloadStatus;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive', () => ({
+  __esModule: true,
+  ...jest.requireActual('pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive'),
+  default: () => ({
+    downloadContractArchive: mockDownloadContractArchive,
+    createContractArchive: mockCreateContractArchive,
+    status: mockDownloadContractArchiveStatus,
+  }),
+}));
+
+let mockHasContractToDownload: boolean;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useHasContractToDownload/index.tsx', () => ({
+  __esModule: true,
+  default: () => mockHasContractToDownload,
+}));
+
+describe('TeacherDashboardContractsLayout/BulkDownloadContractButton', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // useDownloadContractArchive mocked values
+    mockHasContractToDownload = false;
+    mockDownloadContractArchive = jest.fn(() => Promise<void>);
+    mockCreateContractArchive = jest.fn(() => Promise<void>);
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.IDLE;
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("shouldn't render generate archive button for archive generation IDLE", async () => {
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.IDLE;
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $button = screen.queryByRole('button', { name: /Request contracts archive/ });
+    expect($button).toBeInTheDocument();
+    expect($button).toBeEnabled();
+
+    const user = userEvent.setup();
+    await user.click($button!);
+    expect(mockDownloadContractArchive).toHaveBeenCalledTimes(1);
+  });
+
+  it("shouldn't render waiting archive button for archive generation PENDING", async () => {
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.PENDING;
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $button = screen.queryByRole('button', { name: /Generating contracts archive.../ });
+    expect($button).toBeInTheDocument();
+    expect($button).toBeDisabled();
+
+    const user = userEvent.setup();
+    await user.click($button!);
+    expect(mockDownloadContractArchive).not.toHaveBeenCalled();
+  });
+
+  it("shouldn't render download button for archive is READY", async () => {
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.READY;
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $button = screen.queryByRole('button', { name: /Download contracts archive/ });
+    expect($button).toBeInTheDocument();
+    expect($button).toBeEnabled();
+
+    const user = userEvent.setup();
+    await user.click($button!);
+    expect(mockDownloadContractArchive).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render disabled download button when INITIALIZING', async () => {
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.INITIALIZING;
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $button = screen.queryByRole('button', { name: /Download contracts archive/ });
+    expect($button).toBeInTheDocument();
+    expect($button).toBeDisabled();
+
+    const user = userEvent.setup();
+    await user.click($button!);
+    expect(mockDownloadContractArchive).not.toHaveBeenCalled();
+  });
+});

package/js/pages/TeacherDashboardContractsLayout/components/BulkDownloadContractButton/index.timer.spec.tsx

@@ -0,0 +1,144 @@
+import { faker } from '@faker-js/faker';
+import { render, screen, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+
+import {
+  getStoredContractArchiveId,
+  storeContractArchiveId,
+  unstoreContractArchiveId,
+} from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/contractArchiveLocalStorage';
+import { CONTRACT_DOWNLOAD_SETTINGS } from 'settings';
+import BulkDownloadContractButton from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+let mockHasContractToDownload: boolean;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useHasContractToDownload/index.tsx', () => ({
+  __esModule: true,
+  default: () => mockHasContractToDownload,
+}));
+
+const mockCheckArchive = jest.fn();
+const mockCreateArchive = jest.fn();
+const mockGetArchive = jest.fn();
+jest.mock('hooks/useContractArchive', () => ({
+  __esModule: true,
+  default: () => ({
+    methods: { get: mockGetArchive, create: mockCreateArchive, check: mockCheckArchive },
+  }),
+}));
+
+describe('TeacherDashboardContractsLayout/BulkDownloadContractButton with fake timer', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  let contractArchiveId: string;
+  beforeEach(() => {
+    mockHasContractToDownload = true;
+
+    const now = Date.now();
+    const unvalidCreationTime =
+      now - CONTRACT_DOWNLOAD_SETTINGS.contractArchiveLocalVaklidityDurationMs * 2;
+
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date(unvalidCreationTime));
+    contractArchiveId = faker.string.uuid();
+    storeContractArchiveId(contractArchiveId);
+    jest.setSystemTime(new Date(now));
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+    jest.clearAllMocks();
+    unstoreContractArchiveId();
+  });
+
+  it("should return IDLE status and clear stored id when archive doesn't exists on the server", async () => {
+    mockHasContractToDownload = true;
+    mockCheckArchive.mockResolvedValue(false);
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $downloadButton = screen.queryByRole('button', {
+      name: /Download contracts archive/,
+    });
+    expect($downloadButton).toBeInTheDocument();
+
+    // BulkDownloadButton is disabled until initiliazed
+    expect($downloadButton).toBeDisabled();
+    expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+
+    // Button should initalize with idle state and propose an archive generation
+    await waitFor(() => {
+      const $createArchiveButton = screen.queryByRole('button', {
+        name: /Request contracts archive/,
+      });
+      expect($createArchiveButton).toBeInTheDocument();
+      expect($createArchiveButton).toBeEnabled();
+    });
+
+    expect(getStoredContractArchiveId()).toBe(null);
+    expect(mockGetArchive).not.toHaveBeenCalled();
+    expect(mockCreateArchive).not.toHaveBeenCalled();
+
+    // polling shouldn't start, mockCheckArchive shouldn't been called more than once
+    expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+  });
+
+  it('should return READY status when archive exists on the server', async () => {
+    mockHasContractToDownload = true;
+    mockCheckArchive.mockResolvedValue(true);
+
+    render(
+      <Wrapper>
+        <BulkDownloadContractButton organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    const $initButton = screen.queryByRole('button', {
+      name: /Download contracts archive/,
+    });
+    expect($initButton).toBeInTheDocument();
+    // BulkDownloadButton is disabled until initiliazed
+    expect($initButton).toBeDisabled();
+    expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+
+    await waitFor(() => {
+      const $downloadButton = screen.queryByRole('button', {
+        name: /Download contracts archive/,
+      });
+      expect($downloadButton).toBeInTheDocument();
+      expect($downloadButton).toBeEnabled();
+    });
+
+    expect(getStoredContractArchiveId()).toBe(contractArchiveId);
+    expect(mockGetArchive).not.toHaveBeenCalled();
+    expect(mockCreateArchive).not.toHaveBeenCalled();
+
+    // polling shouldn't start, mockCheckArchive shouldn't been called more than once
+    expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+  });
+});

package/js/pages/TeacherDashboardContractsLayout/components/BulkDownloadContractButton/index.tsx

@@ -0,0 +1,73 @@
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { useEffect } from 'react';
+import useDownloadContractArchive, {
+  ContractDownloadStatus,
+} from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive';
+import { Organization } from 'types/Joanie';
+
+const messages = defineMessages({
+  bulkDownloadButtonDownloadLabel: {
+    defaultMessage: 'Download contracts archive',
+    description: 'The label of the bulk download button when the zip archive is ready for download',
+    id: 'pages.TeacherDashboardContractsLayout.BulkDownloadContractButton.bulkDownloadButtonDownloadLabel',
+  },
+  bulkDownloadButtonPendingLabel: {
+    defaultMessage: 'Generating contracts archive...',
+    description: 'The label of the bulk download button when archive generation is pending',
+    id: 'pages.TeacherDashboardContractsLayout.BulkDownloadContractButton.bulkDownloadButtonPendingLabel',
+  },
+  bulkDownloadButtonRequestArchiveLabel: {
+    defaultMessage: 'Request contracts archive',
+    description: 'The label of the bulk download button to request the generation of a zip archive',
+    id: 'pages.TeacherDashboardContractsLayout.BulkDownloadContractButton.bulkDownloadButtonRequestArchiveLabel',
+  },
+});
+
+interface BulkDownloadContractButtonProps {
+  organizationId: Organization['id'];
+}
+
+const BulkDownloadContractButton = ({ organizationId }: BulkDownloadContractButtonProps) => {
+  const { downloadContractArchive, createContractArchive, status } = useDownloadContractArchive({
+    organizationId,
+  });
+
+  useEffect(() => {
+    // Trigger contract's archive polling when generation had already been requested
+    if (status === ContractDownloadStatus.PENDING) {
+      createContractArchive();
+    }
+  }, [status]);
+
+  if (status === ContractDownloadStatus.PENDING) {
+    return (
+      <Button
+        disabled={true}
+        color="tertiary"
+        size="small"
+        icon={<div className="spinner spinner--small" />}
+      >
+        <FormattedMessage {...messages.bulkDownloadButtonPendingLabel} />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      onClick={downloadContractArchive}
+      disabled={status === ContractDownloadStatus.INITIALIZING}
+      color={status === ContractDownloadStatus.READY ? 'primary' : 'tertiary'}
+      size="small"
+      icon={<span className="material-icons">download</span>}
+    >
+      <FormattedMessage
+        {...(status === ContractDownloadStatus.IDLE
+          ? messages.bulkDownloadButtonRequestArchiveLabel
+          : messages.bulkDownloadButtonDownloadLabel)}
+      />
+    </Button>
+  );
+};
+
+export default BulkDownloadContractButton;

package/js/pages/TeacherDashboardContractsLayout/components/ContractActionsBar/index.spec.tsx

@@ -0,0 +1,185 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ContractDownloadStatus } from 'pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive';
+import ContractActionsBar from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+let mockCanSignContracts: boolean;
+let mockContractsToSignCount: number;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign', () => ({
+  __esModule: true,
+  default: () => ({
+    canSignContracts: mockCanSignContracts,
+    contractsToSignCount: mockContractsToSignCount,
+  }),
+}));
+
+let mockDownloadContractArchive: () => Promise<void>;
+let mockCreateContractArchive: () => Promise<void>;
+let mockDownloadContractArchiveStatus: ContractDownloadStatus;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive', () => ({
+  __esModule: true,
+  ...jest.requireActual('pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive'),
+  default: () => ({
+    downloadArchive: mockDownloadContractArchive,
+    createContractArchive: mockCreateContractArchive,
+    status: mockDownloadContractArchiveStatus,
+  }),
+}));
+
+let mockHasContractToDownload: boolean;
+jest.mock('pages/TeacherDashboardContractsLayout/hooks/useHasContractToDownload/index.tsx', () => ({
+  __esModule: true,
+  default: () => mockHasContractToDownload,
+}));
+
+describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // useTeacherContractsToSign mocked values
+    mockCanSignContracts = true;
+    mockContractsToSignCount = 1;
+
+    // useDownloadContractArchive mocked values
+    mockHasContractToDownload = false;
+    mockDownloadContractArchive = jest.fn(() => Promise.resolve());
+    mockCreateContractArchive = jest.fn(() => Promise.resolve());
+    mockDownloadContractArchiveStatus = ContractDownloadStatus.IDLE;
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("shouldn't display both sign and download button", () => {
+    mockHasContractToDownload = true;
+    mockCanSignContracts = true;
+    mockContractsToSignCount = 1;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Sign all pending contracts/ })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Request contracts archive/ })).toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      label: "doesn't have contract to download",
+      hasContractToDownload: false,
+      courseProductRelationId: undefined,
+    },
+    {
+      label: 'has contract to download and courseProductRelationId',
+      hasContractToDownload: true,
+      courseProductRelationId: faker.string.uuid(),
+    },
+    {
+      label: "doesn't have contract to download  and courseProductRelationId",
+      hasContractToDownload: false,
+      courseProductRelationId: faker.string.uuid(),
+    },
+  ])(
+    "shouldn't only display sign button when $label",
+    ({ hasContractToDownload, courseProductRelationId }) => {
+      mockHasContractToDownload = hasContractToDownload;
+      mockCanSignContracts = true;
+      mockContractsToSignCount = 1;
+
+      render(
+        <Wrapper>
+          <ContractActionsBar
+            courseProductRelationId={courseProductRelationId}
+            organizationId={faker.string.uuid()}
+          />
+        </Wrapper>,
+      );
+
+      expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Sign all pending contracts/ }),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /Request contracts archive/ }),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it("shouldn't only display download button", () => {
+    mockHasContractToDownload = true;
+    mockCanSignContracts = false;
+    mockContractsToSignCount = 0;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar organizationId={faker.string.uuid()} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Request contracts archive/ })).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Sign all pending contracts/ }),
+    ).not.toBeInTheDocument();
+  });
+
+  it.each([
+    {
+      label: 'only download is available but we have a courseProductRelationId',
+      hasContractToDownload: true,
+      courseProductRelationId: faker.string.uuid(),
+    },
+    {
+      label: 'no actions are available',
+      hasContractToDownload: false,
+    },
+  ])('should return nothing when $label', ({ hasContractToDownload, courseProductRelationId }) => {
+    mockHasContractToDownload = hasContractToDownload;
+    mockCanSignContracts = false;
+    mockContractsToSignCount = 0;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar
+          courseProductRelationId={courseProductRelationId}
+          organizationId={faker.string.uuid()}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.queryByTestId('teacher-contracts-list-actionsBar')).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Request contracts archive/ }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: /Sign all pending contracts/ }),
+    ).not.toBeInTheDocument();
+  });
+});

package/js/pages/TeacherDashboardContractsLayout/components/ContractActionsBar/index.tsx

@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import { Organization, CourseProductRelation } from 'types/Joanie';
+import useTeacherContractsToSign from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign';
+import useHasContractToDownload from 'pages/TeacherDashboardContractsLayout/hooks/useHasContractToDownload';
+import SignOrganizationContractButton from '../SignOrganizationContractButton';
+import BulkDownloadContractButton from '../BulkDownloadContractButton';
+
+interface ContractActionsProps {
+  organizationId: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const ContractActionsBar = ({ organizationId, courseProductRelationId }: ContractActionsProps) => {
+  const { canSignContracts, contractsToSignCount } = useTeacherContractsToSign({
+    organizationId,
+    courseProductRelationId,
+  });
+  const hasContractToDownload = useHasContractToDownload(organizationId, courseProductRelationId);
+
+  const canDownloadContracts = hasContractToDownload && !courseProductRelationId;
+  const nbAvailableActions = [canSignContracts, canDownloadContracts].filter((val) => val).length;
+  const courseProductRelationIds = courseProductRelationId ? [courseProductRelationId] : undefined;
+  return (
+    nbAvailableActions > 0 && (
+      <div
+        className={classNames('dashboard__page__actions-row', {
+          'dashboard__page__actions-row--space-between': nbAvailableActions > 1,
+          'dashboard__page__actions-row--end': nbAvailableActions === 1,
+        })}
+        data-testid="teacher-contracts-list-actionsBar"
+      >
+        {canSignContracts && (
+          <div>
+            <SignOrganizationContractButton
+              courseProductRelationIds={courseProductRelationIds}
+              organizationId={organizationId}
+              contractToSignCount={contractsToSignCount}
+            />
+          </div>
+        )}
+        {canDownloadContracts && <BulkDownloadContractButton organizationId={organizationId} />}
+      </div>
+    )
+  );
+};
+
+export default ContractActionsBar;