richie-education 2.25.0-b2.dev20 → 2.25.0-b2.dev22

package/js/api/joanie.ts

@@ -370,12 +370,9 @@ const API = (): Joanie.API => {
       contracts: {
         get: async ({ contract_ids, ...filters } = {}) => {
           const endpointFilters = { ...filters, queryParameters: { id: contract_ids } };
-          return fetchWithJWT(
-            filters?.organization_id
-              ? buildApiUrl(ROUTES.organizations.contracts.get, endpointFilters)
-              : buildApiUrl(ROUTES.user.contracts.get, filters),
-            { method: 'GET' },
-          ).then(checkStatus);
+          return fetchWithJWT(buildApiUrl(ROUTES.user.contracts.get, endpointFilters), {
+            method: 'GET',
+          }).then(checkStatus);
         },
         download(id: string): Promise<any> {
           return fetchWithJWT(ROUTES.user.contracts.download.replace(':id', id), {
@@ -391,6 +388,12 @@ const API = (): Joanie.API => {
         }).then(checkStatus);
       },
       contracts: {
+        get: async ({ contract_ids, ...filters } = {}) => {
+          const endpointFilters = { ...filters, queryParameters: { id: contract_ids } };
+          return fetchWithJWT(buildApiUrl(ROUTES.organizations.contracts.get, endpointFilters), {
+            method: 'GET',
+          }).then(checkStatus);
+        },
         getSignatureLinks: async (filters) => {
           return fetchWithJWT(
             buildApiUrl(ROUTES.organizations.contracts.getSignatureLinks, filters),

package/js/components/ContractFrame/OrganizationContractFrame.tsx

@@ -33,7 +33,7 @@ const OrganizationContractFrame = ({ organizationId, contractIds, onDone, ...pro
    * Check if all contracts to signed has been signed.
    */
   const checkContractsSignature = async () => {
-    const { results: contractsToCheck } = await api.user.contracts.get({
+    const { results: contractsToCheck } = await api.organizations.contracts.get({
       organization_id: organizationId,
       contract_ids: contractIdsToCheck,
     });

package/js/hooks/useContracts/index.tsx

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { QueryOptions, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
 import { API, Contract, ContractFilters } from 'types/Joanie';
 
 const messages = defineMessages({
@@ -22,8 +22,47 @@ const props: UseResourcesProps<Contract, ContractFilters, API['user']['contracts
   session: true,
   messages,
 };
+
 /**
  * Joanie Api hook to retrieve/update a contract owned by the authenticated user.
  */
-export const useContract = useResource(props);
-export const useContracts = useResources(props);
+export const useUserContract = useResource(props);
+export const useUserContracts = useResources(props);
+
+/**
+ * Joanie Api hook to retrieve/update a contracts related to a course.
+ */
+const organizationProps: UseResourcesProps<
+  Contract,
+  ContractFilters,
+  API['organizations']['contracts']
+> = {
+  ...props,
+  queryKey: ['organization_contracts'],
+  apiInterface: () => useJoanieApi().organizations.contracts,
+};
+
+export const useOrganizationContract = (
+  id: string,
+  filters: ContractFilters,
+  queryOptions?: QueryOptions<Contract>,
+) => {
+  return useResource(organizationProps)(id, filters, {
+    ...queryOptions,
+    enabled:
+      !!id &&
+      !!filters?.organization_id &&
+      (queryOptions?.enabled === undefined || queryOptions.enabled),
+  });
+};
+
+export const useOrganizationContracts = (
+  filters: ContractFilters,
+  queryOptions?: QueryOptions<Contract>,
+) => {
+  return useResources(organizationProps)(filters, {
+    ...queryOptions,
+    enabled:
+      !!filters?.organization_id && (queryOptions?.enabled === undefined || queryOptions.enabled),
+  });
+};

package/js/hooks/useTeacherPendingContractsCount/index.ts

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+import { useOrganizationContracts } from 'hooks/useContracts';
+import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
+import { PER_PAGE } from 'settings';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+
+interface UseTeacherPendingContractsCountProps {
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const useTeacherPendingContractsCount = ({
+  organizationId,
+  courseProductRelationId,
+}: UseTeacherPendingContractsCountProps) => {
+  const {
+    item: training,
+    states: { isFetched: isTrainingFetched },
+  } = useCourseProductRelation(courseProductRelationId, {
+    organization_id: organizationId,
+  });
+
+  const isActive = useMemo(() => {
+    return !!(organizationId && (!courseProductRelationId || isTrainingFetched));
+  }, [organizationId, courseProductRelationId, isTrainingFetched]);
+
+  const { items: contracts, meta } = useOrganizationContracts(
+    {
+      organization_id: organizationId,
+      course_id: training?.course.id,
+      product_id: training?.product.id,
+      signature_state: ContractState.LEARNER_SIGNED,
+      page: 1,
+      page_size: PER_PAGE.teacherContractList,
+    },
+    { enabled: isActive },
+  );
+
+  if (isActive) {
+    return {
+      contracts,
+      pendingContractCount: meta?.pagination?.count ?? 0,
+    };
+  }
+  return {
+    contracts: [],
+    pendingContractCount: 0,
+  };
+};
+
+export default useTeacherPendingContractsCount;

package/js/pages/DashboardContracts/index.tsx

@@ -4,7 +4,7 @@ import { Pagination, usePagination } from 'components/Pagination';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
 import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract';
-import { useContracts } from 'hooks/useContracts';
+import { useUserContracts } from 'hooks/useContracts';
 import { NestedCredentialOrder } from 'types/Joanie';
 
 const messages = defineMessages({
@@ -27,7 +27,7 @@ export const DashboardContracts = () => {
     items: contracts,
     meta,
     states: { error, fetching },
-  } = useContracts({
+  } = useUserContracts({
     page: pagination.currentPage,
     page_size: pagination.itemsPerPage,
   });

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

@@ -4,7 +4,7 @@ import { DataGrid, usePagination } from '@openfun/cunningham-react';
 import { useEffect, useMemo } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
-import { useContracts } from 'hooks/useContracts';
+import { useOrganizationContracts } from 'hooks/useContracts';
 import Banner, { BannerType } from 'components/Banner';
 import { PER_PAGE } from 'settings';
 import { ContractFilters } from 'types/Joanie';
@@ -47,14 +47,11 @@ const TeacherDashboardContracts = () => {
     items: contracts,
     meta,
     states: { fetching, isFetched, error },
-  } = useContracts(
-    {
-      ...filters,
-      page: pagination.page,
-      page_size: PER_PAGE.teacherContractList,
-    },
-    { enabled: !!filters.organization_id },
-  );
+  } = useOrganizationContracts({
+    ...filters,
+    page: pagination.page,
+    page_size: PER_PAGE.teacherContractList,
+  });
 
   const rows = useMemo(() => {
     return contracts.map((contract) => ({

package/js/pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign.tsx

@@ -1,5 +1,5 @@
 import useContractAbilities from 'hooks/useContractAbilities';
-import { useContracts } from 'hooks/useContracts';
+import { useOrganizationContracts } from 'hooks/useContracts';
 import { ContractState, CourseListItem, Organization, Product } from 'types/Joanie';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 
@@ -14,15 +14,12 @@ const useTeacherContractsToSign = ({
   productId,
   organizationId,
 }: UseTeacherContractsToSignProps) => {
-  const { items: contractsToSign, meta: contractsToSignMeta } = useContracts(
-    {
-      signature_state: ContractState.LEARNER_SIGNED,
-      organization_id: organizationId,
-      course_id: courseId,
-      product_id: productId,
-    },
-    { enabled: !!organizationId },
-  );
+  const { items: contractsToSign, meta: contractsToSignMeta } = useOrganizationContracts({
+    signature_state: ContractState.LEARNER_SIGNED,
+    organization_id: organizationId,
+    course_id: courseId,
+    product_id: productId,
+  });
   const contractAbilities = useContractAbilities(contractsToSign);
   const contractsToSignCount = contractsToSignMeta?.pagination?.count ?? 0;
 

package/js/types/Joanie.ts

@@ -541,6 +541,11 @@ export interface API {
       filters?: Filters,
     ): Filters extends { id: string } ? Promise<Nullable<Organization>> : Promise<Organization[]>;
     contracts: {
+      get(
+        filters?: ContractFilters,
+      ): ContractFilters extends { id: string }
+        ? Promise<Nullable<Contract>>
+        : Promise<PaginatedResponse<Contract>>;
       getSignatureLinks(
         filters?: OrganizationContractSignatureLinksFilters,
       ): Promise<OrganizationContractInvitationLinkResponse>;

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.spec.tsx

@@ -14,6 +14,7 @@ import {
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { PER_PAGE } from 'settings';
 import { TeacherDashboardOrganizationSidebar } from '.';
 
 jest.mock('utils/context', () => ({
@@ -61,7 +62,7 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/organizations/' +
         organization.id +
-        '/contracts/?signature_state=half_signed',
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
       { results: [], count: 0, previous: null, next: null },
     );
 
@@ -96,7 +97,7 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/organizations/' +
         organization.id +
-        '/contracts/?signature_state=half_signed',
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
       {
         results: ContractFactory({ abilities: { sign: true } }).many(contractToSignCount),
         count: contractToSignCount,
@@ -128,7 +129,7 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/organizations/' +
         organization.id +
-        '/contracts/?signature_state=half_signed',
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
       {
         results: ContractFactory({ abilities: { sign: false } }).many(contractToSignCount),
         count: contractToSignCount,

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.tsx

@@ -1,19 +1,19 @@
 import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { createSearchParams, generatePath, useParams } from 'react-router-dom';
+import { createSearchParams, useParams } from 'react-router-dom';
 import Badge from 'components/Badge';
 import { Spinner } from 'components/Spinner';
-import useContractAbilities from 'hooks/useContractAbilities';
-import { useContracts } from 'hooks/useContracts';
 import { useOrganization } from 'hooks/useOrganizations';
 import { ContractState } from 'types/Joanie';
-import { ContractActions } from 'utils/AbilitiesHelper/types';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
 } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
+import useContractAbilities from 'hooks/useContractAbilities';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '../DashboardAvatar';
 
 const messages = defineMessages({
@@ -33,25 +33,24 @@ export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId } = useParams<{ organizationId: string }>();
+  const { organizationId, productId: courseProductRelationId } = useParams<{
+    organizationId: string;
+    productId?: string;
+  }>();
   const {
     item: organization,
     states: { fetching },
   } = useOrganization(organizationId);
 
-  const { items: contracts, meta } = useContracts({
-    organization_id: organizationId,
-    signature_state: ContractState.LEARNER_SIGNED,
+  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
+    organizationId,
+    courseProductRelationId,
   });
-  const contractAbilities = useContractAbilities(contracts);
-
-  const pendingContractCount = meta?.pagination?.count ?? 0;
+  const contractAbilities = useContractAbilities(pendingContracts);
   const canSignContracts = contractAbilities.can(ContractActions.SIGN);
 
   const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
-    const path = generatePath(getRoutePath(basePath, { organizationId: ':organizationId' }), {
-      organizationId,
-    });
+    const path = getRoutePath(basePath, { organizationId });
 
     const menuLink: MenuLink = {
       to: path,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev20",
+  "version": "2.25.0-b2.dev22",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {