richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -0,0 +1,179 @@
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import fetchMock from 'fetch-mock';
+import { userEvent } from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ContractState } from 'types/Joanie';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { noop } from 'utils';
+import ContractFiltersBar from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe('<ContractFiltersBar/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieSessionProvider>
+            <CunninghamProvider>{children}</CunninghamProvider>
+          </JoanieSessionProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeEach(() => {
+    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(() => {
+    fetchMock.restore();
+    jest.resetAllMocks();
+  });
+
+  it('should render SignatureState and Organization filters with default value', async () => {
+    const filterChange = jest.fn();
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      signature_state: ContractState.LEARNER_SIGNED,
+      organization_id: organizations[1].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar onFiltersChange={filterChange} defaultValues={defaultValues} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Two selects should have rendered
+    const organizationFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Organization',
+    });
+    expect(organizationFilter).toHaveAttribute('value', organizations[1].title);
+
+    const signatureStateFilter: HTMLInputElement = screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    const value = (signatureStateFilter.querySelector('input[type="hidden"]') as HTMLInputElement)
+      ?.value;
+    expect(value).toBe('half_signed');
+
+    expect(filterChange).not.toHaveBeenCalled();
+
+    // Now change value of organization filter should trigger the onFiltersChange callback
+    const user = userEvent.setup();
+    await user.click(organizationFilter);
+    let optionToSelect = screen.getByRole('option', { name: organizations[0].title });
+    await user.click(optionToSelect);
+    expect(filterChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
+
+    // Then change value of signature state filter should trigger the onFiltersChange callback too
+    filterChange.mockRestore();
+    await user.click(signatureStateFilter);
+    optionToSelect = screen.getByRole('option', { name: 'Signed' });
+    await user.click(optionToSelect);
+    expect(filterChange).toHaveBeenNthCalledWith(1, { signature_state: ContractState.SIGNED });
+  });
+
+  it('should allow to hide signatureState filter', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      organization_id: organizations[0].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar
+          onFiltersChange={noop}
+          defaultValues={defaultValues}
+          hideFilterSignatureState={true}
+        />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Organization filter should have been rendered
+    screen.getByRole('combobox', { name: 'Organization' });
+
+    // Signature state filter should have not been rendered
+    const signatureStateFilter = screen.queryByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+    expect(signatureStateFilter).not.toBeInTheDocument();
+  });
+
+  it('should allow to hide organization filter', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const defaultValues = {
+      organization_id: organizations[0].id,
+    };
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar
+          onFiltersChange={noop}
+          defaultValues={defaultValues}
+          hideFilterOrganization={true}
+        />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Signature state filter should have been rendered
+    screen.getByRole('combobox', {
+      name: 'Signature state',
+      hidden: true,
+    });
+
+    // Organization filter should not have been rendered
+    const organizationFilter = screen.queryByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).not.toBeInTheDocument();
+  });
+
+  it('should be able to select default value for organization if none are provided', async () => {
+    const organizations = OrganizationFactory().many(2);
+    const handleChange = jest.fn();
+
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', organizations);
+
+    render(
+      <Wrapper>
+        <ContractFiltersBar onFiltersChange={handleChange} />
+      </Wrapper>,
+    );
+
+    await waitFor(() => expectNoSpinner());
+
+    // Organization filter should have been rendered and the first organization should be selected
+    const organizationFilter = screen.getByRole('combobox', { name: 'Organization' });
+    expect(organizationFilter).toHaveAttribute('value', organizations[0].title);
+    expect(handleChange).toHaveBeenNthCalledWith(1, { organization_id: organizations[0].id });
+  });
+});

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

@@ -0,0 +1,86 @@
+import { Select, SelectProps } from '@openfun/cunningham-react';
+import { defineMessages, useIntl } from 'react-intl';
+import FiltersBar from 'widgets/Dashboard/components/FiltersBar';
+import { ContractState } from 'types/Joanie';
+import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
+import FilterOrganization from 'widgets/Dashboard/components/FilterOrganization';
+
+export const messages = defineMessages({
+  organizationFilterLabel: {
+    defaultMessage: 'Organization',
+    description: 'Use as organization filter label',
+    id: 'pages.TeacherDashboardContractsLayout.ContractFilters.organizationFilterLabel',
+  },
+  contractSignatureStateLabel: {
+    defaultMessage: 'Signature state',
+    description: 'Contract signature state filter label',
+    id: 'pages.TeacherDashboardContractsLayout.ContractFilters.contractSignatureStateFilterLabel',
+  },
+});
+
+export interface ContractListFilters {
+  organization_id?: string;
+  signature_state?: ContractState;
+}
+
+interface ContractFiltersBarProps {
+  onFiltersChange: (filters: Partial<ContractListFilters>) => void;
+  defaultValues?: ContractListFilters;
+  hideFilterOrganization?: boolean;
+  hideFilterSignatureState?: boolean;
+}
+
+const ContractFiltersBar = ({
+  defaultValues,
+  onFiltersChange,
+  hideFilterOrganization = false,
+  hideFilterSignatureState = false,
+}: ContractFiltersBarProps) => {
+  return (
+    <FiltersBar>
+      {!hideFilterOrganization && (
+        <FilterOrganization
+          defaultValue={defaultValues?.organization_id}
+          onChange={onFiltersChange}
+        />
+      )}
+      {!hideFilterSignatureState && (
+        <SignatureStateFilter
+          defaultValue={defaultValues?.signature_state}
+          onChange={onFiltersChange}
+        />
+      )}
+    </FiltersBar>
+  );
+};
+
+interface ContractFilterProps {
+  defaultValue?: SelectProps['defaultValue'];
+  onChange: (value: Partial<ContractListFilters>) => void;
+}
+
+const SignatureStateFilter = ({ defaultValue, onChange }: ContractFilterProps) => {
+  const intl = useIntl();
+  const contractStateOptions = Object.values(ContractState)
+    .filter((value) => value !== ContractState.UNSIGNED)
+    .map((value) => ({
+      label: ContractHelper.getStateLabel(value, ContractStatePoV.ORGANIZATION, intl),
+      value,
+    }));
+
+  const handleChange: SelectProps['onChange'] = (e) => {
+    const value = e.target.value as ContractState;
+    onChange({ signature_state: value });
+  };
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.contractSignatureStateLabel)}
+      options={contractStateOptions}
+      defaultValue={defaultValue}
+      onChange={handleChange}
+    />
+  );
+};
+
+export default ContractFiltersBar;

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

@@ -0,0 +1,109 @@
+import { faker } from '@faker-js/faker';
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import fetchMock from 'fetch-mock';
+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 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>
+    );
+  };
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should display sign button user have some contract to sign', () => {
+    render(
+      <Wrapper>
+        <SignOrganizationContractButton
+          organizationId={faker.string.uuid()}
+          contractToSignCount={12}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      screen.getByRole('button', { name: 'Sign all pending contracts (12)' }),
+    ).toBeInTheDocument();
+    const DashboardContractFramePortal = document.getElementsByClassName('ReactModalPortal');
+    expect(DashboardContractFramePortal).toHaveLength(1);
+  });
+
+  it("shouldn't display sign button user don't have some contract to sign", () => {
+    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);
+  });
+
+  it.each([
+    {
+      label: "organization's contracts",
+      organizationId: faker.string.uuid(),
+      courseProductRelationIds: undefined,
+    },
+    {
+      label: "organization's training contracts",
+      organizationId: faker.string.uuid(),
+      courseProductRelationIds: [faker.string.uuid()],
+    },
+  ])('should open $label frame on click', async ({ organizationId, courseProductRelationIds }) => {
+    render(
+      <Wrapper>
+        <SignOrganizationContractButton
+          organizationId={organizationId}
+          courseProductRelationIds={courseProductRelationIds}
+          contractToSignCount={12}
+        />
+      </Wrapper>,
+    );
+
+    const $button = screen.getByRole('button', { name: /Sign all pending contracts/ });
+    const user = userEvent.setup();
+
+    let getInvitationLinkUrl = `https://joanie.test/api/v1.0/organizations/${organizationId}/contracts-signature-link/`;
+    if (courseProductRelationIds) {
+      getInvitationLinkUrl += `?course_product_relation_ids=${courseProductRelationIds[0]}`;
+    }
+
+    fetchMock.get(getInvitationLinkUrl, {
+      invitation_link: 'https://dummysignaturebackend.fr',
+      contract_ids: [],
+    });
+    await user.click($button);
+
+    expect(screen.getByTestId('dashboard-contract-frame')).toBeInTheDocument();
+    expect(fetchMock.called(getInvitationLinkUrl)).toBe(true);
+  });
+});

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

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+import { OrganizationContractFrame } from 'components/ContractFrame';
+
+import { CourseProductRelation, Organization } from 'types/Joanie';
+
+const messages = defineMessages({
+  signAllPendingContracts: {
+    defaultMessage: 'Sign all pending contracts ({ count })',
+    description: 'Button to sign all pending contracts',
+    id: 'pages.TeacherDashboardOrganizationContractsLayout.signAllPendingContracts',
+  },
+});
+
+interface Props {
+  courseProductRelationIds?: CourseProductRelation['id'][];
+  organizationId: Organization['id'];
+  contractToSignCount: number;
+}
+
+const SignOrganizationContractButton = ({
+  organizationId,
+  contractToSignCount,
+  courseProductRelationIds = [],
+}: Props) => {
+  const [contractFrameOpened, setContractFrameOpened] = useState(false);
+  const hasContractToSign = contractToSignCount > 0;
+
+  return (
+    <>
+      {hasContractToSign && (
+        <Button
+          size="small"
+          color="primary"
+          onClick={() => setContractFrameOpened(true)}
+          disabled={contractFrameOpened}
+          icon={
+            <span className="material-icons" aria-hidden={true}>
+              edit
+            </span>
+          }
+        >
+          <FormattedMessage
+            {...messages.signAllPendingContracts}
+            values={{ count: contractToSignCount }}
+          />
+        </Button>
+      )}
+      <OrganizationContractFrame
+        courseProductRelationIds={courseProductRelationIds}
+        organizationId={organizationId}
+        isOpen={contractFrameOpened}
+        onClose={() => setContractFrameOpened(false)}
+      />
+    </>
+  );
+};
+
+export default SignOrganizationContractButton;

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);
+  });
+});

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

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import useContractArchive from 'hooks/useContractArchive';
+import { CONTRACT_DOWNLOAD_SETTINGS } from 'settings';
+import { Nullable } from 'types/utils';
+import { getStoredContractArchiveId } from '../useDownloadContractArchive/contractArchiveLocalStorage';
+
+export interface UseCheckContractArchiveExistsProps {
+  enable: boolean;
+}
+
+const useCheckContractArchiveExist = (
+  { enable }: UseCheckContractArchiveExistsProps = { enable: true },
+) => {
+  // Contract's archive api interface
+  const {
+    methods: { check: checkArchiveExist },
+  } = useContractArchive();
+
+  // Store if the contract's archive exists or not on the server
+  // stay null until fetched
+  const [isContractArchiveExists, setIsContractArchiveExists] = useState<Nullable<boolean>>(null);
+
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  // This method will check if the archive exists on the server
+  // option.polling === true will recursivly poll archive existence
+  const checkArchiveExists = async (
+    archiveId: string,
+    options: { polling: boolean } = { polling: true },
+  ) => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = undefined;
+
+    const isExists = await checkArchiveExist(archiveId);
+    setIsContractArchiveExists(isExists);
+
+    if (!options.polling) {
+      return;
+    }
+
+    if (!isExists) {
+      timeoutRef.current = setTimeout(
+        () => checkArchiveExists(archiveId),
+        CONTRACT_DOWNLOAD_SETTINGS.pollInterval,
+      );
+    }
+  };
+
+  // This effect will initialize isContractArchiveExists value
+  useEffect(() => {
+    const storedContractArchiveId = getStoredContractArchiveId();
+    if (enable && storedContractArchiveId) {
+      checkArchiveExists(storedContractArchiveId, { polling: false });
+    } else {
+      setIsContractArchiveExists(false);
+    }
+  }, [enable]);
+
+  // Be sure to clear any timeout before unmouting the hook.
+  useEffect(() => {
+    return () => {
+      clearTimeout(timeoutRef.current);
+    };
+  }, []);
+
+  return {
+    isPolling: !!timeoutRef.current,
+    isContractArchiveExists,
+    checkArchiveExists,
+  };
+};
+
+export default useCheckContractArchiveExist;