richie-education 2.25.0-b2.dev26 → 2.25.0-b2.dev30

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -151,6 +151,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.resolve({ isSigned: true });
@@ -207,6 +212,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.reject(new HttpError(500, 'Interval server error'));
@@ -263,6 +273,11 @@ describe('<AbstractContractFrame />', () => {
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
     });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
     expect(screen.getByRole('status')).toBeInTheDocument();
 
     checkSignatureDeferred.resolve({ isSigned: false });

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -50,6 +50,12 @@ export const messages = defineMessages({
     description: 'Message displayed inside the contract signin modal when polling the order.',
     id: 'components.DashboardItem.Order.ContractFrame.polling',
   },
+  pollingDescription: {
+    defaultMessage:
+      'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+    description: 'Message displayed inside the contract signin modal when polling the order.',
+    id: 'components.DashboardItem.Order.ContractFrame.pollingDescription',
+  },
   finishedCaption: {
     defaultMessage: 'Congratulations!',
     description: 'Title displayed inside the contract signin modal when the contract is signed.',
@@ -251,9 +257,14 @@ const ContractFrameContent = ({
       )}
       {step === ContractSteps.POLLING && (
         <div className="ContractFrame__loading-container">
-          <h3 className="ContractFrame__caption">
-            <FormattedMessage {...messages.polling} />
-          </h3>
+          <div>
+            <h3 className="ContractFrame__caption">
+              <FormattedMessage {...messages.polling} />
+            </h3>
+            <p className="ContractFrame__content">
+              <FormattedMessage {...messages.pollingDescription} />
+            </p>
+          </div>
           <Loader />
         </div>
       )}

package/js/hooks/useContracts/index.tsx

@@ -1,7 +1,7 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { QueryOptions, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-import { API, Contract, ContractFilters } from 'types/Joanie';
+import { API, Contract, ContractResourceQuery } from 'types/Joanie';
 
 const messages = defineMessages({
   errorGet: {
@@ -16,7 +16,7 @@ const messages = defineMessages({
   },
 });
 
-const props: UseResourcesProps<Contract, ContractFilters, API['user']['contracts']> = {
+const props: UseResourcesProps<Contract, ContractResourceQuery, API['user']['contracts']> = {
   queryKey: ['contracts'],
   apiInterface: () => useJoanieApi().user.contracts,
   session: true,
@@ -34,7 +34,7 @@ export const useUserContracts = useResources(props);
  */
 const organizationProps: UseResourcesProps<
   Contract,
-  ContractFilters,
+  ContractResourceQuery,
   API['organizations']['contracts']
 > = {
   ...props,
@@ -44,7 +44,7 @@ const organizationProps: UseResourcesProps<
 
 export const useOrganizationContract = (
   id: string,
-  filters: ContractFilters,
+  filters: ContractResourceQuery,
   queryOptions?: QueryOptions<Contract>,
 ) => {
   return useResource(organizationProps)(id, filters, {
@@ -57,7 +57,7 @@ export const useOrganizationContract = (
 };
 
 export const useOrganizationContracts = (
-  filters: ContractFilters,
+  filters: ContractResourceQuery,
   queryOptions?: QueryOptions<Contract>,
 ) => {
   return useResources(organizationProps)(filters, {

package/js/hooks/useTeacherPendingContractsCount/index.ts

@@ -1,6 +1,4 @@
-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';
 
@@ -13,30 +11,15 @@ const useTeacherPendingContractsCount = ({
   organizationId,
   courseProductRelationId,
 }: UseTeacherPendingContractsCountProps) => {
-  const {
-    item: training,
-    states: { isFetched: isTrainingFetched },
-  } = useCourseProductRelation(courseProductRelationId, {
+  const { items: contracts, meta } = useOrganizationContracts({
     organization_id: organizationId,
+    course_product_relation_id: courseProductRelationId,
+    signature_state: ContractState.LEARNER_SIGNED,
+    page: 1,
+    page_size: PER_PAGE.teacherContractList,
   });
 
-  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) {
+  if (organizationId) {
     return {
       contracts,
       pendingContractCount: meta?.pagination?.count ?? 0,

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

@@ -78,19 +78,22 @@ describe('pages/TeacherDashboardContracts', () => {
     }).many(3);
     const organization = OrganizationFactory().one();
 
+    // OrganizationContractFilter request all organizations forwho the user have access
     fetchMock.get(`https://joanie.test/api/v1.0/organizations/`, [organization]);
+    // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=signed&course_id=1&product_id=2&page=1&page_size=25`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=signed&course_product_relation_id=2&page=1&page_size=25`,
       { results: contracts, count: 0, previous: null, next: null },
     );
+    // useTeacherContractsToSign request all contract to sign, without pagination
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&course_id=1&product_id=2`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
       { results: [], count: 0, previous: null, next: null },
     );
 
     render(
       <Wrapper
-        path="/courses/:courseId/products/:productId/contracts"
+        path="/courses/:courseId/products/:courseProductRelationId/contracts"
         initialEntry="/courses/1/products/2/contracts"
       />,
     );

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

@@ -7,9 +7,9 @@ import { ContractHelper, ContractStatePoV } from 'utils/ContractHelper';
 import { useOrganizationContracts } from 'hooks/useContracts';
 import Banner, { BannerType } from 'components/Banner';
 import { PER_PAGE } from 'settings';
-import { ContractFilters } from 'types/Joanie';
+import { ContractResourceQuery } from 'types/Joanie';
 
-import ContractFiltersBar from '../components/ContractFilters';
+import ContractFiltersBar from '../components/ContractFiltersBar';
 import useTeacherContractFilters, {
   TeacherDashboardContractsParams,
 } from '../hooks/useTeacherContractFilters';
@@ -62,7 +62,7 @@ const TeacherDashboardContracts = () => {
     }));
   }, [contracts]);
 
-  const handleFiltersChange = (newFilters: Partial<ContractFilters>) => {
+  const handleFiltersChange = (newFilters: Partial<ContractResourceQuery>) => {
     // Reset pagination
     pagination.setPage(1);
     setFilters((prevFilters) => ({ ...prevFilters, ...newFilters }));
@@ -83,8 +83,7 @@ const TeacherDashboardContracts = () => {
       <div className="dashboard__page__actions">
         <ContractActionsBar
           organizationId={filters.organization_id!}
-          courseId={filters.course_id}
-          productId={filters.product_id}
+          courseProductRelationId={filters.course_product_relation_id}
         />
         <ContractFiltersBar
           defaultValues={initialFilters}

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

@@ -1,18 +1,16 @@
-import { CourseListItem, Organization, Product } from 'types/Joanie';
+import { Organization, CourseProductRelation } from 'types/Joanie';
 import useTeacherContractsToSign from 'pages/TeacherDashboardContractsLayout/hooks/useTeacherContractsToSign';
 import SignOrganizationContractButton from '../SignOrganizationContractButton';
 
 interface ContractActionsProps {
-  courseId?: CourseListItem['id'];
-  productId?: Product['id'];
   organizationId: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
 }
 
-const ContractActionsBar = ({ courseId, productId, organizationId }: ContractActionsProps) => {
+const ContractActionsBar = ({ organizationId, courseProductRelationId }: ContractActionsProps) => {
   const { canSignContracts, contractsToSignCount } = useTeacherContractsToSign({
     organizationId,
-    courseId,
-    productId,
+    courseProductRelationId,
   });
   return (
     canSignContracts && (

package/js/pages/TeacherDashboardContractsLayout/components/{ContractFilters → ContractFiltersBar}/index.spec.tsx

@@ -12,7 +12,7 @@ import { ContractState } from 'types/Joanie';
 import { OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { noop } from 'utils';
-import ContractFilters from '.';
+import ContractFiltersBar from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -22,7 +22,7 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
-describe('ContractFilters', () => {
+describe('<ContractFiltersBar/>', () => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
       <IntlProvider locale="en">
@@ -58,7 +58,7 @@ describe('ContractFilters', () => {
 
     render(
       <Wrapper>
-        <ContractFilters onFiltersChange={filterChange} defaultValues={defaultValues} />
+        <ContractFiltersBar onFiltersChange={filterChange} defaultValues={defaultValues} />
       </Wrapper>,
     );
 
@@ -105,7 +105,7 @@ describe('ContractFilters', () => {
 
     render(
       <Wrapper>
-        <ContractFilters
+        <ContractFiltersBar
           onFiltersChange={noop}
           defaultValues={defaultValues}
           hideFilterSignatureState={true}
@@ -136,7 +136,7 @@ describe('ContractFilters', () => {
 
     render(
       <Wrapper>
-        <ContractFilters
+        <ContractFiltersBar
           onFiltersChange={noop}
           defaultValues={defaultValues}
           hideFilterOrganization={true}
@@ -165,7 +165,7 @@ describe('ContractFilters', () => {
 
     render(
       <Wrapper>
-        <ContractFilters onFiltersChange={handleChange} />
+        <ContractFiltersBar onFiltersChange={handleChange} />
       </Wrapper>,
     );
 

package/js/pages/TeacherDashboardContractsLayout/components/{ContractFilters → ContractFiltersBar}/index.tsx

@@ -24,7 +24,7 @@ export interface ContractListFilters {
   signature_state?: ContractState;
 }
 
-interface ContractFiltersProps {
+interface ContractFiltersBarProps {
   onFiltersChange: (filters: Partial<ContractListFilters>) => void;
   defaultValues?: ContractListFilters;
   hideFilterOrganization?: boolean;
@@ -36,12 +36,12 @@ interface FilterProps {
   onChange: (value: Partial<ContractListFilters>) => void;
 }
 
-const ContractFilters = ({
+const ContractFiltersBar = ({
   defaultValues,
   onFiltersChange,
   hideFilterOrganization = false,
   hideFilterSignatureState = false,
-}: ContractFiltersProps) => {
+}: ContractFiltersBarProps) => {
   return (
     <div className="dashboard__page__actions-row dashboard__page__actions-row--end">
       {!hideFilterOrganization && (
@@ -122,4 +122,4 @@ const SignatureStateFilter = ({ defaultValue, onChange }: FilterProps) => {
   );
 };
 
-export default ContractFilters;
+export default ContractFiltersBar;

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

@@ -1,15 +1,14 @@
 import { useMemo, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
-import { ContractFilters, ContractState } from 'types/Joanie';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
 
 export type TeacherDashboardContractsParams = {
   organizationId?: string;
-  courseId?: string;
-  productId?: string;
+  courseProductRelationId?: string;
 };
 
 const useTeacherContractFilters = () => {
-  const { courseId, organizationId, productId } = useParams<TeacherDashboardContractsParams>();
+  const { organizationId, courseProductRelationId } = useParams<TeacherDashboardContractsParams>();
   const [searchParams] = useSearchParams();
 
   const initialFilters = useMemo(
@@ -17,12 +16,11 @@ const useTeacherContractFilters = () => {
       signature_state:
         (searchParams.get('signature_state') as ContractState) || ContractState.SIGNED,
       organization_id: organizationId,
-      course_id: courseId,
-      product_id: productId,
+      course_product_relation_id: courseProductRelationId,
     }),
     [],
   );
-  const [filters, setFilters] = useState<ContractFilters>(initialFilters);
+  const [filters, setFilters] = useState<ContractResourceQuery>(initialFilters);
 
   return { initialFilters, filters, setFilters };
 };

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

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

package/js/types/Joanie.ts

@@ -427,10 +427,9 @@ export enum ContractState {
   LEARNER_SIGNED = 'half_signed',
   SIGNED = 'signed',
 }
-export interface ContractFilters extends PaginatedResourceQuery {
+export interface ContractResourceQuery extends PaginatedResourceQuery {
   organization_id?: Organization['id'];
-  course_id?: CourseListItem['id'];
-  product_id?: Product['id'];
+  course_product_relation_id?: CourseProductRelation['id'];
   contract_ids?: Contract['id'][];
   signature_state?: ContractState;
 }
@@ -516,8 +515,8 @@ interface APIUser {
   };
   contracts: {
     get(
-      filters?: ContractFilters,
-    ): ContractFilters extends { id: string }
+      filters?: ContractResourceQuery,
+    ): ContractResourceQuery extends { id: string }
       ? Promise<Nullable<Contract>>
       : Promise<PaginatedResponse<Contract>>;
     download(id: string): Promise<File>;
@@ -542,8 +541,8 @@ export interface API {
     ): Filters extends { id: string } ? Promise<Nullable<Organization>> : Promise<Organization[]>;
     contracts: {
       get(
-        filters?: ContractFilters,
-      ): ContractFilters extends { id: string }
+        filters?: ContractResourceQuery,
+      ): ContractResourceQuery extends { id: string }
         ? Promise<Nullable<Contract>>
         : Promise<PaginatedResponse<Contract>>;
       getSignatureLinks(

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

@@ -33,9 +33,9 @@ export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId, productId: courseProductRelationId } = useParams<{
+  const { organizationId, courseProductRelationId } = useParams<{
     organizationId: string;
-    productId?: string;
+    courseProductRelationId?: string;
   }>();
   const {
     item: organization,

package/package.json

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