richie-education 3.2.1 → 3.2.2-dev26

package/js/pages/TeacherDashboardOrganizationAgreements/BulkAgreementContractButton.tsx

@@ -0,0 +1,79 @@
+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 { Offering, 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 BulkDownloadAgreementButtonProps {
+  organizationId?: Organization['id'];
+  offeringId?: Offering['id'];
+}
+
+const BulkDownloadAgreementButton = ({
+  organizationId,
+  offeringId,
+}: BulkDownloadAgreementButtonProps) => {
+  const { downloadContractArchive, createContractArchive, status } = useDownloadContractArchive({
+    organizationId,
+    offeringId,
+    fromBatchOrder: true,
+  });
+
+  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 BulkDownloadAgreementButton;

package/js/pages/TeacherDashboardOrganizationAgreements/OrganizationAgreementFrame.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import AbstractContractFrame, {
+  AbstractProps,
+} from 'components/ContractFrame/AbstractContractFrame';
+import { Agreement, Offering } from 'types/Joanie';
+
+interface Props extends AbstractProps {
+  agreementIds?: Agreement['id'][];
+  organizationId: string;
+  offeringIds?: Offering['id'][];
+}
+
+const OrganizationAgreementFrame = ({
+  organizationId,
+  offeringIds = [],
+  agreementIds,
+  onDone,
+  ...props
+}: Props) => {
+  const api = useJoanieApi();
+  const queryClient = useQueryClient();
+  const [agreementsIdsToCheck, setAgreementsIdsToCheck] = useState(agreementIds);
+
+  const getInvitationLink = async () => {
+    /*
+     The API returns the invitation link to sign contracts and a list of contracts ids which should
+     be signed. We need to keep track of these ids to check if all contracts have been signed.
+     */
+    const response = await api.organizations.contracts.getSignatureLinks({
+      offering_ids: offeringIds,
+      organization_id: organizationId,
+      contracts_ids: agreementIds,
+      from_batch_order: true,
+    });
+    setAgreementsIdsToCheck(response.contract_ids);
+    return response.invitation_link;
+  };
+
+  /*
+   * Check if all contracts to signed has been signed.
+   */
+  const checkAgreementsSignature = async () => {
+    const { results: agreementsToCheck } = await api.organizations.agreements.get({
+      organization_id: organizationId,
+      contract_ids: agreementsIdsToCheck,
+    });
+    const isSigned = agreementsToCheck.every((agreement) =>
+      Boolean(agreement?.organization_signed_on),
+    );
+
+    return { isSigned };
+  };
+
+  const onDoneWithInvalidation = () => {
+    queryClient.invalidateQueries({ queryKey: ['user', 'organizationAgreements'] });
+    onDone?.();
+  };
+
+  return (
+    <AbstractContractFrame
+      getInvitationLink={getInvitationLink}
+      checkSignature={checkAgreementsSignature}
+      onDone={onDoneWithInvalidation}
+      {...props}
+    />
+  );
+};
+
+export default OrganizationAgreementFrame;

package/js/pages/TeacherDashboardOrganizationAgreements/SignOrganizationAgreementButton.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
+
+import { Offering, Organization } from 'types/Joanie';
+import OrganizationAgreementFrame from './OrganizationAgreementFrame';
+
+const messages = defineMessages({
+  signAllPendingAgreements: {
+    defaultMessage: 'Sign all pending agreements ({ count })',
+    description: 'Button to sign all pending agreements',
+    id: 'pages.TeacherDashboardOrganizationAgreementsLayout.signAllPendingAgreements',
+  },
+});
+
+interface Props {
+  offeringIds?: Offering['id'][];
+  organizationId: Organization['id'];
+  agreementToSignCount: number;
+}
+
+const SignOrganizationAgreementButton = ({
+  organizationId,
+  agreementToSignCount,
+  offeringIds = [],
+}: Props) => {
+  const [agreementFrameOpened, setAgreementFrameOpened] = useState(false);
+  const hasAgreementToSign = agreementToSignCount > 0;
+
+  return (
+    <>
+      {hasAgreementToSign && (
+        <Button
+          size="small"
+          color="primary"
+          onClick={() => setAgreementFrameOpened(true)}
+          disabled={agreementFrameOpened}
+          icon={
+            <span className="material-icons" aria-hidden={true}>
+              edit
+            </span>
+          }
+        >
+          <FormattedMessage
+            {...messages.signAllPendingAgreements}
+            values={{ count: agreementToSignCount }}
+          />
+        </Button>
+      )}
+      <OrganizationAgreementFrame
+        offeringIds={offeringIds}
+        organizationId={organizationId}
+        isOpen={agreementFrameOpened}
+        onClose={() => setAgreementFrameOpened(false)}
+      />
+    </>
+  );
+};
+
+export default SignOrganizationAgreementButton;

package/js/pages/TeacherDashboardOrganizationAgreements/hooks/useAgreementsAbilities.tsx

@@ -0,0 +1,8 @@
+import { Agreement } from 'types/Joanie';
+import AbilitiesHelper from 'utils/AbilitiesHelper';
+
+const useAgreementAbilities = (agreements?: Agreement | Agreement[]) => {
+  return AbilitiesHelper.buildEntityInterface(agreements);
+};
+
+export default useAgreementAbilities;

package/js/pages/TeacherDashboardOrganizationAgreements/hooks/useHasAgreementToDownload.tsx

@@ -0,0 +1,27 @@
+import { useOrganizationAgreements } from 'hooks/useOrganizationAgreements.tsx';
+import { PER_PAGE } from 'settings';
+import { ContractState, Offering, Organization } from 'types/Joanie';
+
+const useHasAgreementToDownload = (
+  organizationId?: Organization['id'],
+  offeringId?: Offering['id'],
+) => {
+  const {
+    items: agreements,
+    states: { isFetched },
+  } = useOrganizationAgreements({
+    organization_id: organizationId,
+    offering_id: offeringId,
+    signature_state: ContractState.SIGNED,
+    page: 1,
+    page_size: PER_PAGE.teacherContractList,
+  });
+
+  if (!isFetched) {
+    return null;
+  }
+
+  return agreements.length > 0;
+};
+
+export default useHasAgreementToDownload;

package/js/pages/TeacherDashboardOrganizationAgreements/hooks/useTeacherAgreementsToSign.tsx

@@ -0,0 +1,32 @@
+import { useOrganizationAgreements } from 'hooks/useOrganizationAgreements.tsx';
+import { ContractState, Organization, Offering } from 'types/Joanie';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import useAgreementAbilities from './useAgreementsAbilities';
+
+interface UseTeacherAgreementsToSignProps {
+  organizationId?: Organization['id'];
+  offeringId?: Offering['id'];
+}
+
+const useTeacherAgreementsToSign = ({
+  organizationId,
+  offeringId,
+}: UseTeacherAgreementsToSignProps) => {
+  const { items: agreementsToSign, meta: agreementsToSignMeta } = useOrganizationAgreements(
+    {
+      signature_state: ContractState.LEARNER_SIGNED,
+      organization_id: organizationId,
+      offering_id: offeringId,
+    },
+    { enabled: !!organizationId },
+  );
+  const agreementAbilities = useAgreementAbilities(agreementsToSign);
+  const agreementToSignCount = agreementsToSignMeta?.pagination?.count ?? 0;
+
+  return {
+    canSignAgreements: organizationId && agreementAbilities.can(ContractActions.SIGN),
+    agreementToSignCount,
+  };
+};
+
+export default useTeacherAgreementsToSign;