richie-education 3.2.1-dev9 → 3.2.2-dev26

package/js/hooks/useOrganizationQuotes/index.tsx

@@ -0,0 +1,56 @@
+import { defineMessages } from 'react-intl';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { OrganizationQuote, OrganizationQuoteQueryFilters } from 'types/Joanie';
+
+const messages = defineMessages({
+  errorCreate: {
+    id: 'hooks.useOrganizationsQuotes.errorGet',
+    defaultMessage: 'An error occurred while fetching the batch order.',
+    description: 'Error message shown when batch order fetch fails.',
+  },
+});
+
+export const useOrganizationsQuotes = () => {
+  const { organizations } = useJoanieApi();
+  const api = organizations.quotes;
+  const props: UseResourcesProps<OrganizationQuote, OrganizationQuoteQueryFilters, typeof api> = {
+    queryKey: ['organizationQuote'],
+    apiInterface: () => api,
+    session: true,
+    messages,
+  };
+
+  const quotes = useResources<OrganizationQuote, OrganizationQuoteQueryFilters>(props);
+  const quote = useResource<OrganizationQuote, OrganizationQuoteQueryFilters>(props);
+
+  const confirmQuote = async (filters: OrganizationQuoteQueryFilters) => {
+    return api.update(filters);
+  };
+
+  const confirmPurchaseOrder = async (filters: OrganizationQuoteQueryFilters) => {
+    return api.purchase_order.update(filters);
+  };
+
+  const confirmBankTransfer = async (filters: OrganizationQuoteQueryFilters) => {
+    return api.bank_transfer.create(filters);
+  };
+
+  const submitForSignature = async (filters: OrganizationQuoteQueryFilters) => {
+    return api.submit_for_signature.create(filters);
+  };
+
+  const downloadQuote = async (filters: OrganizationQuoteQueryFilters) => {
+    return api.download_quote.get(filters);
+  };
+
+  return {
+    quotes,
+    quote,
+    confirmQuote,
+    confirmPurchaseOrder,
+    confirmBankTransfer,
+    submitForSignature,
+    downloadQuote,
+  };
+};

package/js/hooks/usePaymentPlan.tsx

@@ -2,6 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { PaymentPlan } from 'types/Joanie';
 import { Nullable } from 'types/utils';
+import { HttpError } from 'utils/errors/HttpError';
 
 type PaymentPlanFilters = {
   course_code: string;
@@ -13,7 +14,7 @@ export const usePaymentPlan = (filters: PaymentPlanFilters) => {
   const queryKey = ['courses-products', ...Object.values(filters), 'payment-plan'];
 
   const api = useJoanieApi();
-  return useQuery<Nullable<PaymentPlan>, Error>({
+  return useQuery<Nullable<PaymentPlan>, HttpError>({
     queryKey,
     queryFn: () =>
       api.courses.products.paymentPlan.get({

package/js/hooks/useTeacherPendingAgreementsCount/index.ts

@@ -0,0 +1,34 @@
+import { useOrganizationAgreements } from 'hooks/useOrganizationAgreements.tsx';
+import { PER_PAGE } from 'settings';
+import { ContractState, Offering, Organization } from 'types/Joanie';
+
+interface UseTeacherPendingContractsCountProps {
+  organizationId?: Organization['id'];
+  offeringId?: Offering['id'];
+}
+
+const useTeacherPendingAgreementsCount = ({
+  organizationId,
+  offeringId,
+}: UseTeacherPendingContractsCountProps) => {
+  const { items: agreements, meta } = useOrganizationAgreements({
+    organization_id: organizationId,
+    offering_id: offeringId,
+    signature_state: ContractState.LEARNER_SIGNED,
+    page: 1,
+    page_size: PER_PAGE.teacherContractList,
+  });
+
+  if (organizationId) {
+    return {
+      agreements,
+      pendingAgreementCount: meta?.pagination?.count ?? 0,
+    };
+  }
+  return {
+    agreements: [],
+    pendingAgreementCount: 0,
+  };
+};
+
+export default useTeacherPendingAgreementsCount;

package/js/pages/DashboardBatchOrderLayout/_styles.scss

@@ -0,0 +1,5 @@
+.dashboard-order-layout {
+  .dashboard__sidebar {
+    display: none;
+  }
+}

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

@@ -0,0 +1,78 @@
+import { findByRole, render, screen, waitFor } from '@testing-library/react';
+import { generatePath } from 'react-router';
+import fetchMock from 'fetch-mock';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { expectUrlMatchLocationDisplayed } from 'utils/test/expectUrlMatchLocationDisplayed';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('settings', () => ({
+  __esModule: true,
+  ...jest.requireActual('settings'),
+  PER_PAGE: { useBatchOrders: 10 },
+}));
+
+describe('<DashboardBatchOrderLayout />', () => {
+  const WrapperWithDashboard = (route: string) => {
+    const client = createTestQueryClient({ user: true });
+    return (
+      <BaseJoanieAppWrapper queryOptions={{ client }}>
+        <DashboardTest initialRoute={route} />
+      </BaseJoanieAppWrapper>
+    );
+  };
+
+  beforeEach(() => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/batch-orders/', []);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('renders sidebar', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+
+    render(
+      WrapperWithDashboard(
+        generatePath(LearnerDashboardPaths.BATCH_ORDER, {
+          batchOrderId: batchOrder.id,
+        }),
+      ),
+    );
+
+    await waitFor(() =>
+      expectUrlMatchLocationDisplayed(
+        generatePath(LearnerDashboardPaths.BATCH_ORDER, {
+          batchOrderId: batchOrder.id,
+        }),
+      ),
+    );
+
+    const sidebar = screen.getByTestId('dashboard__sidebar');
+    await findByRole(sidebar, 'heading');
+
+    screen.getByRole('link', {
+      name: 'General information',
+    });
+  });
+});

package/js/pages/DashboardBatchOrderLayout/index.tsx

@@ -0,0 +1,45 @@
+import { generatePath, Outlet, useParams } from 'react-router';
+import { useIntl } from 'react-intl';
+import { useMemo } from 'react';
+import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
+import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
+import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';
+import { BatchOrderRead } from 'types/Joanie';
+
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { useBatchOrder } from 'hooks/useBatchOrder/index';
+import { LearnerDashboardSidebar } from 'widgets/Dashboard/components/LearnerDashboardSidebar';
+
+export const DashboardBatchOrderLayout = () => {
+  const intl = useIntl();
+  const getRouteLabel = getDashboardRouteLabel(intl);
+  const params = useParams<{ batchOrderId: string }>();
+  const { item: batchOrder } = useBatchOrder(params.batchOrderId);
+
+  const links = useMemo(
+    () => [
+      {
+        to: generatePath(LearnerDashboardPaths.BATCH_ORDER, { batchOrderId: params.batchOrderId! }),
+        label: getRouteLabel(LearnerDashboardPaths.ORDER_RUNS),
+      },
+    ],
+    [],
+  );
+
+  return (
+    <DashboardLayout
+      className="dashboard-order-layout"
+      sidebar={<LearnerDashboardSidebar menuLinks={links} />}
+    >
+      <DashboardBatchOrderLayoutContent batchOrder={batchOrder} />
+    </DashboardLayout>
+  );
+};
+
+const DashboardBatchOrderLayoutContent = ({ batchOrder }: { batchOrder?: BatchOrderRead }) => {
+  useBreadcrumbsPlaceholders({
+    orderTitle: batchOrder?.id ?? '',
+  });
+
+  return <Outlet />;
+};

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

@@ -0,0 +1,237 @@
+import { act, screen, waitFor, within } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import { expectSpinner, expectNoSpinner } from 'utils/test/expectSpinner';
+import { expectBannerError, expectBannerInfo, expectNoBannerInfo } from 'utils/test/expectBanner';
+import { Deferred } from 'utils/test/deferred';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BatchOrderState } from 'types/Joanie';
+import { PaymentMethod } from 'components/PaymentInterfaces/types';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('settings', () => ({
+  __esModule: true,
+  ...jest.requireActual('settings'),
+  PER_PAGE: { useBatchOrders: 10 },
+  PAYMENT_SETTINGS: { pollInterval: 20, pollLimit: 5 },
+}));
+
+const mockMessageModal = jest.fn();
+jest.mock('@openfun/cunningham-react', () => ({
+  ...jest.requireActual('@openfun/cunningham-react'),
+  useModals: () => ({
+    messageModal: mockMessageModal,
+  }),
+}));
+
+jest.mock('components/PaymentInterfaces');
+
+describe('<DashboardBatchOrders/>', () => {
+  setupJoanieSession();
+  const perPage = 10;
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('renders an empty placeholder', async () => {
+    const deferred = new Deferred();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      deferred.promise,
+    );
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectSpinner('Loading batch orders...');
+    await expectNoBannerInfo('You have no batch orders yet.');
+
+    act(() => {
+      deferred.resolve({ results: [], count: 0, next: null, previous: null });
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    await expectBannerInfo('You have no batch orders yet.');
+  });
+
+  it('renders a list of batch orders and excludes canceled ones', async () => {
+    const batchOrders = [
+      ...BatchOrderReadFactory({ payment_method: PaymentMethod.BANK_TRANSFER }).many(3),
+      BatchOrderReadFactory({ state: BatchOrderState.CANCELED }).one(),
+    ];
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`, {
+      results: batchOrders,
+      count: batchOrders.length,
+      next: null,
+      previous: null,
+    });
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    await expectNoBannerInfo('You have no batch orders yet.');
+
+    const items = screen.getAllByTestId('batch-order-enrollment-list-item');
+    expect(items).toHaveLength(3);
+  });
+
+  it('renders pagination and loads next page', async () => {
+    const total = perPage + 3;
+    const batchOrders = BatchOrderReadFactory({ payment_method: PaymentMethod.BANK_TRANSFER }).many(
+      total,
+    );
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`, {
+      results: batchOrders.slice(0, perPage),
+      count: total,
+      next: `https://joanie.endpoint/api/v1.0/batch-orders/?page=2&page_size=${perPage}`,
+      previous: null,
+    });
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=2&page_size=${perPage}`, {
+      results: batchOrders.slice(perPage, total),
+      count: total,
+      next: null,
+      previous: `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+    });
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    let items = screen.getAllByTestId('batch-order-enrollment-list-item');
+    expect(items).toHaveLength(perPage);
+
+    const nextPageLink = screen.getByRole('link', { name: 'Last page 2' });
+    await userEvent.click(nextPageLink);
+
+    await waitFor(() => {
+      items = screen.getAllByTestId('batch-order-enrollment-list-item');
+      expect(items).toHaveLength(total - perPage);
+    });
+  });
+
+  it('shows an error', async () => {
+    const deferred = new Deferred();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      deferred.promise,
+    );
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    deferred.resolve({
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
+    });
+
+    await expectNoSpinner('Loading orders and enrollments...');
+    await expectBannerError('An error occurred while fetching resources. Please retry later.');
+  });
+
+  it('renders a batch order which needs payment and use payment process', async () => {
+    const batchOrder = BatchOrderReadFactory({
+      payment_method: PaymentMethod.CARD_PAYMENT,
+      state: BatchOrderState.PENDING,
+      total: 200,
+      currency: 'EUR',
+    }).one();
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`, {
+      results: [batchOrder],
+      count: 1,
+      next: null,
+      previous: null,
+    });
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/`, [batchOrder]);
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    await expectNoBannerInfo('You have no batch orders yet.');
+
+    const items = screen.getAllByTestId('batch-order-enrollment-list-item');
+    expect(items).toHaveLength(1);
+
+    await screen.findByText('Payment required');
+
+    await userEvent.click(
+      await screen.findByRole('button', {
+        name: 'Pay €200.00',
+      }),
+    );
+
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/submit-for-payment/`,
+      {
+        payment_id: 'payment_id',
+        provider: 'payment_provider',
+        url: 'payment_url',
+      },
+    );
+
+    const modal = await screen.findByRole('dialog');
+    const payButton = await within(modal).findByRole('button', { name: 'Pay €200.00' });
+    await userEvent.click(payButton);
+
+    await screen.findByText('Payment interface component');
+    await screen.findByTestId('payment-success');
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      {
+        results: [{ ...batchOrder, state: BatchOrderState.COMPLETED }],
+        count: 1,
+        next: null,
+        previous: null,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`,
+      { ...batchOrder, state: BatchOrderState.COMPLETED },
+      { overwriteRoutes: true },
+    );
+
+    await userEvent.click(screen.getByTestId('payment-success'));
+
+    await waitFor(() => {
+      expect(mockMessageModal).toHaveBeenCalledWith(
+        expect.objectContaining({
+          title: 'Payment successful',
+        }),
+      );
+    });
+
+    expect(screen.queryByRole('button', { name: /Pay/ })).not.toBeInTheDocument();
+
+    await screen.findByText('Completed');
+  });
+});

package/js/pages/DashboardBatchOrders/index.tsx

@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import classNames from 'classnames';
+import { Spinner } from 'components/Spinner';
+import Banner, { BannerType } from 'components/Banner';
+import { usePagination, Pagination } from 'components/Pagination';
+import { BatchOrderState } from 'types/Joanie';
+import { useBatchOrders } from 'hooks/useBatchOrder';
+import { DashboardItemBatchOrder } from 'widgets/Dashboard/components/DashboardItem/BatchOrder';
+
+const messages = defineMessages({
+  loading: {
+    defaultMessage: 'Loading batch orders...',
+    description: 'Message displayed while loading orders and enrollments',
+    id: 'components.DashboardBatchOrders.loading',
+  },
+  emptyList: {
+    id: 'components.DashboardBatchOrders.emptyList',
+    description: "Empty placeholder of the dashboard's list of orders and enrollments",
+    defaultMessage: 'You have no batch orders yet.',
+  },
+});
+
+export const DashboardBatchOrders = () => {
+  const intl = useIntl();
+  const pagination = usePagination({ itemsPerPage: 10 });
+
+  const { items, meta, states } = useBatchOrders({
+    page: pagination.currentPage,
+    page_size: pagination.itemsPerPage,
+  });
+
+  useEffect(() => {
+    if (meta?.pagination?.count) {
+      pagination.setItemsCount(meta.pagination.count);
+    }
+  }, [meta?.pagination?.count]);
+
+  if (states.error) {
+    return <Banner message={states.error} type={BannerType.ERROR} />;
+  }
+
+  if (items?.length === 0 && states?.isPending) {
+    return (
+      <Spinner aria-labelledby="loading-courses-data">
+        <span id="loading-courses-data">
+          <FormattedMessage {...messages.loading} />
+        </span>
+      </Spinner>
+    );
+  }
+
+  return (
+    <div className="dashboard__courses">
+      {items?.length === 0 && (
+        <div className="dashboard__courses__empty">
+          <Banner message={intl.formatMessage(messages.emptyList)} />
+        </div>
+      )}
+      {items?.length > 0 && (
+        <>
+          <div
+            className={classNames('dashboard__courses__list', {
+              'dashboard__list--loading': states?.isPending,
+            })}
+          >
+            {items
+              ?.filter((batchOrder) => batchOrder.state !== BatchOrderState.CANCELED)
+              .map((batchOrder) => (
+                <div
+                  key={batchOrder.id}
+                  className="dashboard__courses__list__item"
+                  data-testid="batch-order-enrollment-list-item"
+                >
+                  <DashboardItemBatchOrder batchOrder={batchOrder} />
+                </div>
+              ))}
+          </div>
+          <Pagination {...pagination} />
+        </>
+      )}
+    </div>
+  );
+};

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

@@ -1,5 +1,4 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
-
 import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import TeacherDashboardContracts from '../TeacherDashboardContracts';

package/js/pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/index.tsx

@@ -20,11 +20,13 @@ export enum ContractDownloadStatus {
 interface UseTeacherContractsBulkDownloadProps {
   organizationId?: Organization['id'];
   offeringId?: Offering['id'];
+  fromBatchOrder?: boolean;
 }
 
 const useDownloadContractArchive = ({
   organizationId,
   offeringId,
+  fromBatchOrder,
 }: UseTeacherContractsBulkDownloadProps) => {
   const localstorageArchiveFilters = {
     organizationId,
@@ -116,7 +118,7 @@ const useDownloadContractArchive = ({
   const createContractArchive = async () => {
     let newContractArchiveId;
     if (contractArchiveId === null) {
-      newContractArchiveId = await createArchive(organizationId, offeringId);
+      newContractArchiveId = await createArchive(organizationId, offeringId, fromBatchOrder);
       setContractArchiveId(newContractArchiveId);
       storeContractArchiveId({
         ...localstorageArchiveFilters,

package/js/pages/TeacherDashboardOrganizationAgreements/AgreementActionsBar.tsx

@@ -0,0 +1,49 @@
+import classNames from 'classnames';
+import { Organization, Offering } from 'types/Joanie';
+import useTeacherAgreementsToSign from './hooks/useTeacherAgreementsToSign';
+import SignOrganizationAgreementButton from './SignOrganizationAgreementButton';
+import BulkDownloadAgreementButton from './BulkAgreementContractButton';
+import useHasAgreementToDownload from './hooks/useHasAgreementToDownload';
+
+interface AgreementActionsProps {
+  organizationId: Organization['id'];
+  offeringId?: Offering['id'];
+}
+
+const AgreementActionsBar = ({ organizationId, offeringId }: AgreementActionsProps) => {
+  const { canSignAgreements, agreementToSignCount } = useTeacherAgreementsToSign({
+    organizationId,
+    offeringId,
+  });
+  const hasContractToDownload = useHasAgreementToDownload(organizationId, offeringId);
+
+  const nbAvailableActions = [canSignAgreements, hasContractToDownload].filter((val) => val).length;
+  const offeringIds = offeringId ? [offeringId] : 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"
+      >
+        {canSignAgreements && (
+          <div>
+            <SignOrganizationAgreementButton
+              offeringIds={offeringIds}
+              organizationId={organizationId}
+              agreementToSignCount={agreementToSignCount}
+            />
+          </div>
+        )}
+        {hasContractToDownload && (
+          <BulkDownloadAgreementButton organizationId={organizationId} offeringId={offeringId} />
+        )}
+      </div>
+    )
+  );
+};
+
+export default AgreementActionsBar;