richie-education 3.2.1-dev9 → 3.2.2-dev26

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

@@ -0,0 +1,433 @@
+import fetchMock from 'fetch-mock';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import { browserDownloadFromBlob } from 'utils/download';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { AgreementFactory } from 'utils/test/factories/joanie';
+import { expectBannerError } from 'utils/test/expectBanner';
+import TeacherDashboardOrganizationAgreements from '.';
+
+let user: UserEvent;
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/download', () => ({
+  browserDownloadFromBlob: jest.fn((fn) => fn().then(() => true)),
+}));
+
+describe('pages/TeacherDashboardOrganizationAgreements', () => {
+  beforeEach(() => {
+    user = userEvent.setup();
+    jest.resetAllMocks();
+  });
+  setupJoanieSession();
+
+  it('should render a list of agreements for an organization', async () => {
+    const agreementList = AgreementFactory().many(5);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: agreementList,
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+    agreementList.forEach((agreement) => {
+      expect(screen.getByTestId(agreement.id));
+    });
+  });
+
+  it('should render an empty list of agreements for an organization', async () => {
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+    await expectNoSpinner();
+    expect(screen.getByRole('img', { name: /illustration of an empty table/i }));
+  });
+
+  it('should display an error when API fails', async () => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed',
+      500,
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      500,
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      500,
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+    expectBannerError('An error occurred while fetching contracts. Please retry later');
+  });
+
+  it('should paginate', async () => {
+    const agreementList = AgreementFactory().many(30);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: agreementList.slice(0, 25),
+        count: 30,
+        previous: null,
+        next: 'https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=2&page_size=25',
+      },
+    );
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=2&page_size=25`,
+      {
+        results: agreementList.slice(25, 30),
+        count: 30,
+        previous:
+          'https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25',
+        next: null,
+      },
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    expect(screen.getByText(agreementList[0].batch_order.owner_name)).toBeInTheDocument();
+    expect(screen.queryByText(agreementList[29].batch_order.owner_name)).not.toBeInTheDocument();
+
+    const nextButton = screen.getByRole('button', { name: /next page/i });
+    await user.click(nextButton);
+
+    await waitFor(() => {
+      expect(screen.getByText(agreementList[29].batch_order.owner_name)).toBeInTheDocument();
+    });
+    expect(screen.queryByText(agreementList[0].batch_order.owner_name)).not.toBeInTheDocument();
+  });
+
+  it('should filter by signature state', async () => {
+    const agreementList = AgreementFactory().many(5);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: agreementList,
+        count: 5,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    expect(screen.getByText(agreementList[0].batch_order.owner_name)).toBeInTheDocument();
+
+    const signatureStateCombobox = screen.getByRole('combobox', { name: /signature state/i });
+    await user.click(signatureStateCombobox);
+    const pendingOption = screen.getByRole('option', { name: /Pending for signature/i });
+    await user.click(pendingOption);
+
+    await waitFor(() => {
+      expect(
+        fetchMock.called(
+          `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+        ),
+      ).toBe(true);
+    });
+  });
+
+  it('should allow to sign agreements', async () => {
+    const agreementList = AgreementFactory()
+      .many(5)
+      .map((agreement: any) => ({ ...agreement, abilities: { sign: true } }));
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      {
+        results: agreementList,
+        count: 5,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: agreementList,
+        count: 5,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    const signatureStateCombobox = screen.getByRole('combobox', { name: /signature state/i });
+    await user.click(signatureStateCombobox);
+    const pendingOption = screen.getByRole('option', { name: /Pending for signature/i });
+    await user.click(pendingOption);
+
+    const signButton = await screen.findByRole('button', { name: /Sign all pending agreements/i });
+    expect(signButton).toBeInTheDocument();
+
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/1/contracts-signature-link/?from_batch_order=true',
+      {
+        invitation_link: 'https://dummysignaturebackend.fr',
+        contract_ids: agreementList.map((a) => a.id),
+      },
+    );
+
+    await user.click(signButton);
+    expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
+  });
+
+  it('should download agreement archive', async () => {
+    const agreementList = AgreementFactory()
+      .many(5)
+      .map((agreement: any) => ({ ...agreement, abilities: { sign: true } }));
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=half_signed`,
+      {
+        results: [],
+        count: 0,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/1/agreements/?signature_state=signed&page=1&page_size=25`,
+      {
+        results: agreementList,
+        count: 5,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<TeacherDashboardOrganizationAgreements />, {
+      routerOptions: {
+        path: '/organizations/:organizationId/agreements',
+        initialEntries: ['/organizations/1/agreements'],
+      },
+    });
+
+    await expectNoSpinner();
+
+    const downloadButton = await screen.findByRole('button', {
+      name: /Request contracts archive/i,
+    });
+    expect(downloadButton).toBeInTheDocument();
+    expect(downloadButton).toBeEnabled();
+
+    const archiveId = '85e098fd-4375-4e0d-9596-3c58988647D0';
+    fetchMock.post('https://joanie.endpoint/api/v1.0/contracts/zip-archive/', {
+      url: `https://joanie.endpoint/api/v1.0/contracts/zip-archive/${archiveId}/`,
+    });
+
+    fetchMock.mock(`https://joanie.endpoint/api/v1.0/contracts/zip-archive/${archiveId}/`, 204, {
+      method: 'OPTIONS',
+    });
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/contracts/zip-archive/${archiveId}/`, {
+      status: 200,
+      body: new Blob(['test']),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Request contracts archive/i })).toBeEnabled();
+    });
+
+    await user.click(downloadButton);
+
+    await waitFor(() => {
+      expect(browserDownloadFromBlob).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/js/pages/TeacherDashboardOrganizationAgreements/index.tsx

@@ -0,0 +1,130 @@
+import { defineMessages, useIntl } from 'react-intl';
+
+import { DataGrid, usePagination } from '@openfun/cunningham-react';
+import { useEffect, useMemo } from 'react';
+import { useParams, useSearchParams } from 'react-router';
+import Banner, { BannerType } from 'components/Banner';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery } from 'types/Joanie';
+
+import { useOrganizations } from 'hooks/useOrganizations';
+import useTeacherContractFilters, {
+  TeacherDashboardContractsParams,
+} from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractFilters';
+import ContractFiltersBar from 'pages/TeacherDashboardContractsLayout/components/ContractFiltersBar';
+import { useOrganizationAgreements } from 'hooks/useOrganizationAgreements.tsx';
+import AgreementActionsBar from './AgreementActionsBar';
+
+const messages = defineMessages({
+  columnProductTitle: {
+    defaultMessage: 'Training',
+    description: 'Label for productTitle column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnProductTitle',
+  },
+  columnLearnerName: {
+    defaultMessage: 'Learner',
+    description: 'Label for learnerName column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnLearnerName',
+  },
+  columnState: {
+    defaultMessage: 'State',
+    description: 'Label for state column',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.columnState',
+  },
+});
+
+const TeacherDashboardOrganizationAgreements = () => {
+  const intl = useIntl();
+  const [searchParams] = useSearchParams();
+  const page = searchParams.get('page') ?? '1';
+  const pagination = usePagination({
+    defaultPage: page ? parseInt(page, 10) : 1,
+    pageSize: PER_PAGE.teacherContractList,
+  });
+  const { organizationId: routeOrganizationId, offeringId: routeOfferingId } =
+    useParams<TeacherDashboardContractsParams>();
+  // organization list is used to show/hide organization filter.
+  // when organizationId is in route's params this filter is always hidden.
+  // therefore we don't need to enable this query.
+  const {
+    items: organizationList,
+    states: { isFetched: isOrganizationListFetched },
+  } = useOrganizations({ offering_id: routeOfferingId }, { enabled: !routeOrganizationId });
+  const hasMultipleOrganizations = isOrganizationListFetched && organizationList.length > 1;
+  const { initialFilters, filters, setFilters } = useTeacherContractFilters();
+  const {
+    items: agreements,
+    meta,
+    states: { fetching, isFetched, error },
+  } = useOrganizationAgreements({
+    ...filters,
+    page: pagination.page,
+    page_size: PER_PAGE.teacherContractList,
+  });
+
+  const rows = useMemo(() => {
+    return agreements.map((agreement) => ({
+      id: agreement.id,
+      learnerName: agreement.batch_order.owner_name,
+      productTitle: agreement.batch_order.relation.product.title,
+      state: agreement.batch_order.state,
+    }));
+  }, [agreements]);
+
+  const handleFiltersChange = (newFilters: Partial<ContractResourceQuery>) => {
+    // Reset pagination
+    pagination.setPage(1);
+    setFilters((prevFilters: any) => ({ ...prevFilters, ...newFilters }));
+  };
+
+  useEffect(() => {
+    if (isFetched && meta?.pagination?.count) {
+      pagination.setPagesCount(Math.ceil(meta!.pagination!.count / PER_PAGE.teacherContractList));
+    }
+  }, [meta, isFetched]);
+
+  if (error) {
+    return <Banner message={error} type={BannerType.ERROR} rounded />;
+  }
+
+  return (
+    <div className="teacher-contract-page">
+      <div className="dashboard__page__actions">
+        <AgreementActionsBar
+          organizationId={filters.organization_id!}
+          offeringId={filters.offering_id}
+        />
+        <ContractFiltersBar
+          defaultValues={initialFilters}
+          onFiltersChange={handleFiltersChange}
+          organizationList={organizationList}
+          hideFilterOrganization={!!(routeOrganizationId || !hasMultipleOrganizations)}
+        />
+      </div>
+      <DataGrid
+        columns={[
+          {
+            field: 'productTitle',
+            headerName: intl.formatMessage(messages.columnProductTitle),
+            enableSorting: false,
+          },
+          {
+            field: 'learnerName',
+            headerName: intl.formatMessage(messages.columnLearnerName),
+            enableSorting: false,
+          },
+          {
+            field: 'state',
+            headerName: intl.formatMessage(messages.columnState),
+            enableSorting: false,
+          },
+        ]}
+        rows={rows}
+        pagination={pagination}
+        isLoading={fetching}
+      />
+    </div>
+  );
+};
+
+export default TeacherDashboardOrganizationAgreements;

package/js/pages/TeacherDashboardOrganizationAgreementsLayout/index.tsx

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

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

@@ -66,6 +66,10 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
       [],
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/agreements/?signature_state=half_signed&page=1`,
+      [],
+    );
 
     render(<TeacherDashboardOrganizationCourseLoader />, {
       routerOptions: {
@@ -78,6 +82,7 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
     nbApiCalls += 1; // course api call
     nbApiCalls += 1; // offerings api call
     nbApiCalls += 1; // contracts api call
+    nbApiCalls += 1; // agreements api call
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
@@ -105,6 +110,10 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
       [],
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/agreements/?signature_state=half_signed&page=1`,
+      [],
+    );
     nbApiCalls += 1;
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/`,

package/js/pages/TeacherDashboardOrganizationQuotes/_styles.scss

@@ -0,0 +1,40 @@
+.dashboard__quotes {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.dashboard__quote__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  justify-content: start;
+  &__main {
+    display: flex;
+    flex-direction: row;
+    justify-content: start;
+    gap: 0.5rem;
+  }
+  &__action {
+    gap: 0.5rem;
+  }
+}
+
+.dashboard__quote__informations {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dashboard__quote__reference,
+.dashboard__quote__information {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.dashboard__quote__modal {
+  display: flex;
+  justify-content: center;
+}