richie-education 2.25.0-b2.dev32 → 2.25.0-b2.dev35

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,166 @@
+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>
+    );
+  };
+
+  beforeAll(() => {
+    const modalExclude = document.createElement('div');
+    modalExclude.setAttribute('id', 'modal-exclude');
+    document.body.appendChild(modalExclude);
+  });
+
+  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
+          courseProductRelationId={faker.string.uuid()}
+          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("shouldn't only display sign button", () => {
+    mockHasContractToDownload = false;
+    mockCanSignContracts = true;
+    mockContractsToSignCount = 1;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar
+          courseProductRelationId={faker.string.uuid()}
+          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
+          courseProductRelationId={faker.string.uuid()}
+          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('should return nothing when no actions are available', () => {
+    mockHasContractToDownload = false;
+    mockCanSignContracts = false;
+    mockContractsToSignCount = 0;
+
+    render(
+      <Wrapper>
+        <ContractActionsBar
+          courseProductRelationId={faker.string.uuid()}
+          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

@@ -1,6 +1,9 @@
+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'];
@@ -12,15 +15,27 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
     organizationId,
     courseProductRelationId,
   });
+  const hasContractToDownload = useHasContractToDownload(organizationId);
+
+  const nbAvailableActions = [canSignContracts, hasContractToDownload].filter((val) => val).length;
   return (
-    canSignContracts && (
-      <div className="dashboard__page__actions-row dashboard__page__actions-row--space-between">
-        <div>
-          <SignOrganizationContractButton
-            organizationId={organizationId}
-            contractToSignCount={contractsToSignCount}
-          />
-        </div>
+    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
+              organizationId={organizationId}
+              contractToSignCount={contractsToSignCount}
+            />
+          </div>
+        )}
+        {hasContractToDownload && <BulkDownloadContractButton organizationId={organizationId} />}
       </div>
     )
   );

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

@@ -0,0 +1,74 @@
+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 SignOrganizationContractButton from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe('TeacherDashboardContractsLayout/SignOrganizationContractButton', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeAll(() => {
+    const modalExclude = document.createElement('div');
+    modalExclude.setAttribute('id', 'modal-exclude');
+    document.body.appendChild(modalExclude);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it("shouldn't render sign button and <OrganizationContractFrame/> when contractToSignCount > 0", () => {
+    render(
+      <Wrapper>
+        <SignOrganizationContractButton
+          organizationId={faker.string.uuid()}
+          contractToSignCount={1}
+        />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('button', { name: /Sign all pending contracts/ })).toBeInTheDocument();
+
+    const DashboardContractFramePortal = document.getElementsByClassName('ReactModalPortal');
+    expect(DashboardContractFramePortal).toHaveLength(1);
+  });
+
+  it("shouldn't only render <OrganizationContractFrame/> when contractToSignCount is 0", () => {
+    render(
+      <Wrapper>
+        <SignOrganizationContractButton
+          organizationId={faker.string.uuid()}
+          contractToSignCount={0}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      screen.queryByRole('button', { name: /Sign all pending contracts/ }),
+    ).not.toBeInTheDocument();
+
+    const DashboardContractFramePortal = document.getElementsByClassName('ReactModalPortal');
+    expect(DashboardContractFramePortal).toHaveLength(1);
+  });
+});

package/js/pages/TeacherDashboardContractsLayout/hooks/useCheckContractArchiveExists/index.spec.tsx

@@ -0,0 +1,124 @@
+import { faker } from '@faker-js/faker';
+import fetchMock from 'fetch-mock';
+import { act, renderHook, waitFor } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+import {
+  storeContractArchiveId,
+  unstoreContractArchiveId,
+} from '../useDownloadContractArchive/contractArchiveLocalStorage';
+import useCheckContractArchiveExists from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+jest.mock('settings', () => ({
+  ...jest.requireActual('settings'),
+  CONTRACT_DOWNLOAD_SETTINGS: {
+    ...jest.requireActual('settings').CONTRACT_DOWNLOAD_SETTINGS,
+    pollInterval: 100,
+  },
+}));
+
+const mockCheckArchive = jest.fn();
+jest.mock('hooks/useContractArchive', () => ({
+  __esModule: true,
+  default: () => ({
+    methods: { get: jest.fn(), create: jest.fn(), check: mockCheckArchive },
+  }),
+}));
+
+describe('useCheckContractArchiveExists', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <JoanieApiProvider>{children}</JoanieApiProvider>
+      </IntlProvider>
+    );
+  };
+  beforeEach(() => {
+    // Joanie providers calls
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+    fetchMock.restore();
+    unstoreContractArchiveId();
+  });
+
+  it('should do nothing and return default value when no contractArchiveId is stored', () => {
+    const { result } = renderHook(useCheckContractArchiveExists, {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.isContractArchiveExists).toBe(false);
+    expect(mockCheckArchive).not.toHaveBeenCalled();
+  });
+
+  it('should check if archive exist when a id is stored', async () => {
+    storeContractArchiveId(faker.string.uuid());
+    mockCheckArchive.mockResolvedValue(true);
+
+    const { result } = renderHook(useCheckContractArchiveExists, {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.isContractArchiveExists).toBeNull();
+    await waitFor(() => {
+      expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+    });
+
+    expect(result.current.isPolling).toBe(false);
+    expect(result.current.isContractArchiveExists).toBe(true);
+  });
+
+  it('should do nothing when enable is false', () => {
+    storeContractArchiveId(faker.string.uuid());
+    mockCheckArchive.mockResolvedValue(true);
+
+    const { result } = renderHook(() => useCheckContractArchiveExists({ enable: false }), {
+      wrapper: Wrapper,
+    });
+
+    expect(result.current.isContractArchiveExists).toBe(false);
+    expect(mockCheckArchive).not.toHaveBeenCalled();
+  });
+
+  it('should trigger polling when checkArchiveExist is call', async () => {
+    const { result, rerender } = renderHook(useCheckContractArchiveExists, {
+      wrapper: Wrapper,
+    });
+
+    mockCheckArchive.mockResolvedValue(false);
+    act(() => {
+      result.current.checkArchiveExists(faker.string.uuid());
+    });
+
+    await waitFor(() => {
+      expect(mockCheckArchive).toHaveBeenCalledTimes(1);
+    });
+
+    expect(result.current.isContractArchiveExists).toBe(false);
+
+    // isPolling it need's a rerender to be updated
+    rerender();
+    expect(result.current.isPolling).toBe(true);
+
+    mockCheckArchive.mockResolvedValue(true);
+    await waitFor(() => {
+      expect(mockCheckArchive).toHaveBeenCalledTimes(2);
+    });
+    expect(result.current.isPolling).toBe(false);
+    expect(result.current.isContractArchiveExists).toBe(true);
+  });
+});