richie-education 2.25.0-b2.dev124 → 2.25.0-b2.dev128

package/js/hooks/useUnionResource/index.spec.tsx

@@ -1,19 +1,13 @@
 import { renderHook, act, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
-import { PropsWithChildren } from 'react';
+import queryString from 'query-string';
 import { PaginatedResourceQuery } from 'types/Joanie';
-import { History, HistoryContext } from 'hooks/useHistory';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { Deferred } from 'utils/test/deferred';
-
 import { noop } from 'utils';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
 import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
-import { FetchEntityData } from './utils/fetchEntities';
+import { BaseAppWrapper } from 'utils/test/wrappers/BaseAppWrapper';
 import { QueryConfig, FetchDataFunction } from './utils/fetchEntity';
 import useUnionResource from '.';
 
@@ -37,49 +31,6 @@ interface TestDataB {
   created_on: string;
 }
 
-const renderUseUnionResource = <
-  DataA extends FetchEntityData,
-  DataB extends FetchEntityData,
-  FiltersA extends PaginatedResourceQuery,
-  FiltersB extends PaginatedResourceQuery,
->(
-  queryAConfig: QueryConfig<DataA, FiltersA>,
-  queryBConfig: QueryConfig<DataB, FiltersB>,
-) => {
-  const Wrapper = ({ client, children }: PropsWithChildren<{ client?: QueryClient }>) => {
-    const historyPushState = jest.fn();
-    const historyReplaceState = jest.fn();
-    const makeHistoryOf: (params: any) => History = () => [
-      {
-        state: { name: '', data: {} },
-        title: '',
-        url: `/`,
-      },
-      historyPushState,
-      historyReplaceState,
-    ];
-
-    return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <HistoryContext.Provider value={makeHistoryOf({})}>
-            <SessionProvider>{children}</SessionProvider>
-          </HistoryContext.Provider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
-
-  return renderHook(
-    () =>
-      useUnionResource<DataA, DataB, FiltersA, FiltersB>({
-        queryAConfig,
-        queryBConfig,
-      }),
-    { wrapper: Wrapper },
-  );
-};
-
 describe('useUnionResource', () => {
   const perPage = PER_PAGE.useUnionResources;
   let dataAList: TestDataA[];
@@ -111,14 +62,14 @@ describe('useUnionResource', () => {
 
       { name: 'TestDataB', id: '14', created_on: '2022-12-03' },
     ];
-    const dummyFetchWrapper = async (url: string) => {
-      const res = await fetch(url);
+    const dummyFetchWrapper = async (url: string, queryParams: { [key: string]: any }) => {
+      const res = await fetch(`${url}?${queryString.stringify(queryParams)}`);
       return res.json();
     };
-    const fetchDataA = ({ page }: { page: number }) =>
-      dummyFetchWrapper(`http://data.a/?page=${page}`);
+    const fetchDataA = ({ page, isFiltered }: { page: number; isFiltered?: boolean }) =>
+      dummyFetchWrapper('http://data.a/', { page, isFiltered });
     const fetchDataB = ({ page }: { page: number }) =>
-      dummyFetchWrapper(`http://data.b/?page=${page}`);
+      dummyFetchWrapper('http://data.b/', { page });
 
     queryAConfig = {
       queryKey: ['resourceA'],
@@ -132,11 +83,6 @@ describe('useUnionResource', () => {
     };
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
   it('should handle loading state', async () => {
     const dataADeferred = new Deferred();
     const dataBDeferred = new Deferred();
@@ -144,12 +90,16 @@ describe('useUnionResource', () => {
     const pendingDataBPromise = () => dataBDeferred.promise;
     queryAConfig.fn = pendingDataAPromise as FetchDataFunction<TestDataA, TestDataAFilters>;
     queryBConfig.fn = pendingDataBPromise as FetchDataFunction<TestDataB, PaginatedResourceQuery>;
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
     expect(result.current.isLoading).toBe(true);
     expect(result.current.hasMore).toBe(false);
 
@@ -164,12 +114,15 @@ describe('useUnionResource', () => {
   it('should render less than 1 page of dataA', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -180,12 +133,15 @@ describe('useUnionResource', () => {
   it('should render less than 1 page of dataB', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([], 0, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([dataBList[0]], 1, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -196,12 +152,15 @@ describe('useUnionResource', () => {
   it('should renders less than 1 page of both dataA and dataB', async () => {
     fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
     fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([dataBList[0]], 1, false));
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(false);
@@ -237,12 +196,14 @@ describe('useUnionResource', () => {
       mockPaginatedResponse(dataBList.slice(perPage * 2, perPage * 3), dataAList.length, false),
     );
 
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
 
     await waitFor(() => expect(result.current.isLoading).toBe(false));
     expect(result.current.hasMore).toBe(true);
@@ -297,12 +258,16 @@ describe('useUnionResource', () => {
     const dataADeferred = new Deferred();
     const pendingDataAPromise = () => dataADeferred.promise;
     queryAConfig.fn = pendingDataAPromise as FetchDataFunction<TestDataA, TestDataAFilters>;
-    const { result } = renderUseUnionResource<
-      TestDataA,
-      TestDataB,
-      TestDataAFilters,
-      PaginatedResourceQuery
-    >(queryAConfig, queryBConfig);
+
+    const { result } = renderHook(
+      () =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig,
+          queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
     expect(result.current.isLoading).toBe(true);
 
     await act(() => {
@@ -313,4 +278,40 @@ describe('useUnionResource', () => {
     expect(result.current.isLoading).toBe(false);
     expect(result.current.error).toBe('An error occurred while fetching data. Please retry later.');
   });
+
+  it('should refetch data when filters change', async () => {
+    fetchMock.get('http://data.a/?page=1', mockPaginatedResponse([dataAList[0]], 1, false));
+    fetchMock.get('http://data.b/?page=1', mockPaginatedResponse([], 0, false));
+
+    const { result, rerender } = renderHook(
+      (queries: {
+        queryA?: QueryConfig<TestDataA, TestDataAFilters>;
+        queryB?: QueryConfig<TestDataB, PaginatedResourceQuery>;
+      }) =>
+        useUnionResource<TestDataA, TestDataB, TestDataAFilters, PaginatedResourceQuery>({
+          queryAConfig: queries?.queryA || queryAConfig,
+          queryBConfig: queries?.queryB || queryBConfig,
+        }),
+      { wrapper: BaseAppWrapper },
+    );
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    let calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(2);
+    expect(calledUrls).toContain('http://data.a/?page=1');
+    expect(calledUrls).toContain('http://data.b/?page=1');
+
+    queryAConfig.filters = { isFiltered: true };
+    fetchMock.get(
+      'http://data.a/?isFiltered=true&page=1',
+      mockPaginatedResponse([dataAList[0]], 1, false),
+    );
+    rerender({ queryA: queryAConfig, queryB: queryBConfig });
+    expect(result.current.isLoading).toBe(true);
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+
+    calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(4);
+    expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
+  });
 });

package/js/hooks/useUnionResource/index.ts

@@ -90,6 +90,8 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
+  const [unionQueryKey, setUnionQueryKey] = useState<string>();
+
   const reset = () => {
     setStack([]);
     setPage(0);
@@ -104,6 +106,18 @@ const useUnionResource = <
     useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
   }
 
+  useEffect(() => {
+    // filters have changes, new results will be fetch.
+    // let's reset every previous fetches states
+    reset();
+
+    // We need to fetch new results.
+    // reset all states isn't enought. If we've a research without results
+    // then the next reset would do nothing.
+    // to force execution of useEffect::fetchNewPage(), we use a uniq key build with current queries filters.
+    setUnionQueryKey(JSON.stringify(queryAConfig.filters) + JSON.stringify(queryBConfig.filters));
+  }, [JSON.stringify(queryAConfig.filters), JSON.stringify(queryBConfig.filters)]);
+
   useEffect(() => {
     async function fetchNewPage() {
       const {
@@ -145,11 +159,18 @@ const useUnionResource = <
 
     // we request more entities than we can display in the right order
     // it's time for new fetching and sorting.
-    if (cursor > integrityCount) {
+    if (!isSyncing && cursor > integrityCount) {
       setIsSyncing(true);
       fetchNewPage();
     }
-  }, [cursor, stack.length]); // stack.length is added in the dependency array to force a new fetch on reset.
+  }, [
+    cursor,
+    // FIXME(rlecellier): when stack.length === 0, invalidate the query will not refetch.
+    // stack.length is added in the dependency array to force a new fetch on reset.
+    stack.length,
+    // unionQueryKey assure that we refetch data when query filters change.
+    unionQueryKey,
+  ]);
 
   const cursorToUse = Math.min(cursor, integrityCount);
   const next = () => {

package/js/pages/DashboardCourses/index.spec.tsx

@@ -1,13 +1,8 @@
-import { act, getByRole, render, screen, waitFor } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
+import { act, getByRole, screen, waitFor } from '@testing-library/react';
+import { QueryClient } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import {
-  UserFactory,
-  RichieContextFactory as mockRichieContextFactory,
-} from 'utils/test/factories/richie';
-import { History, HistoryContext } from 'hooks/useHistory';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
   CourseProductRelationFactory,
@@ -15,7 +10,6 @@ import {
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { CourseLight, CourseProductRelation, Enrollment, CredentialOrder } from 'types/Joanie';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
@@ -25,6 +19,9 @@ import { isOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { noop } from 'utils';
 import { PER_PAGE } from 'settings';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -52,44 +49,8 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('<DashboardCourses/>', () => {
+  setupJoanieSession();
   const perPage = PER_PAGE.useOrdersEnrollments;
-  const historyPushState = jest.fn();
-  const historyReplaceState = jest.fn();
-  const makeHistoryOf: (params: any) => History = () => [
-    {
-      state: { name: '', data: {} },
-      title: '',
-      url: `/`,
-    },
-    historyPushState,
-    historyReplaceState,
-  ];
-
-  beforeEach(() => {
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    fetchMock.restore();
-  });
-
-  const Wrapper = ({ client }: { client?: QueryClient }) => {
-    const user = UserFactory().one();
-    return (
-      <QueryClientProvider client={client ?? createTestQueryClient({ user })}>
-        <IntlProvider locale="en">
-          <HistoryContext.Provider value={makeHistoryOf({})}>
-            <SessionProvider>
-              <DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />
-            </SessionProvider>
-          </HistoryContext.Provider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
 
   const mockOrders = (orders: CredentialOrder[], client?: QueryClient) => {
     const relations: Record<string, CourseProductRelation> = {};
@@ -150,7 +111,9 @@ describe('<DashboardCourses/>', () => {
       enrollmentsDeferred.promise,
     );
 
-    render(<Wrapper />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     await expectSpinner('Loading orders and enrollments...');
     expect(await screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
@@ -242,7 +205,9 @@ describe('<DashboardCourses/>', () => {
 
     const entities = merge(orders, enrollments);
 
-    render(<Wrapper client={client} />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
 
     // Slice 1.
     await expectNoSpinner('Loading orders and enrollments...');
@@ -277,7 +242,10 @@ describe('<DashboardCourses/>', () => {
       { results: [], next: null, previous: null, count: 0 },
     );
 
-    render(<Wrapper />);
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
     ordersDeferred.resolve({
       status: HttpStatusCode.INTERNAL_SERVER_ERROR,
       body: 'Internal Server Error',

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.spec.tsx

@@ -55,7 +55,7 @@ describe('pages/CourseLearnerDataGrid', () => {
       expect(cells[2]).toHaveTextContent(
         intl.formatDate(new Date(courseOrder.created_on), DEFAULT_DATE_FORMAT),
       );
-      expect(cells[3]).toHaveTextContent('Completed');
+      expect(cells[3]).toHaveTextContent('Certified');
       expect(within(cells[4]).getByText('Contact')).toBeInTheDocument();
     });
   });

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.tsx

@@ -3,7 +3,7 @@ import { Button, DataGrid, DataGridProps, PaginationProps, Row } from '@openfun/
 import { useMemo } from 'react';
 import { NestedCourseOrder } from 'types/Joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
-import OrderStateMessage from 'widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage';
+import OrderStateTeacherMessage from 'widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage';
 import DashboardListAvatar from 'widgets/Dashboard/components/DashboardListAvatar';
 
 const messages = defineMessages({
@@ -74,10 +74,8 @@ const CourseLearnerDataGrid = ({
       headerName: intl.formatMessage(messages.columnState),
       enableSorting: false,
       renderCell: (params: { row: Row }) => {
-        // TODO(rlecellier): create NestedOrderCourseStateMessage that's get label dedicated to teatchers.
-        // like signature needed for studdent is awaiting signature for a teacher.
         return (
-          <OrderStateMessage
+          <OrderStateTeacherMessage
             order={params.row.courseOrder}
             contractDefinition={params.row.courseOrder.product.contract_definition_id}
           />

package/js/utils/OrderHelper/index.ts

@@ -7,10 +7,52 @@ import {
   NestedCourseOrder,
 } from 'types/Joanie';
 
+export enum OrderStatus {
+  DRAFT = 'draft',
+  SUBMITTED = 'submitted',
+  PENDING = 'pending',
+  CANCELED = 'canceled',
+  WAITING_SIGNATURE = 'waiting_signature',
+  WAITING_COUNTER_SIGNATURE = 'waiting_counter_signature',
+  COMPLETED = 'completed',
+  ON_GOING = 'on_going',
+}
+
 /**
  * Helper class for orders
  */
 export class OrderHelper {
+  static getState(order: Order | NestedCourseOrder, contractDefinition?: ContractDefinition) {
+    const { certificate_id: certificateId } = order;
+
+    if (order.state === OrderState.VALIDATED) {
+      if (OrderHelper.orderNeedsSignature(order, contractDefinition)) {
+        return OrderStatus.WAITING_SIGNATURE;
+      }
+      if (OrderHelper.orderNeedsCounterSignature(order)) {
+        return OrderStatus.WAITING_COUNTER_SIGNATURE;
+      }
+      if (certificateId) {
+        return OrderStatus.COMPLETED;
+      } else {
+        return OrderStatus.ON_GOING;
+      }
+    }
+
+    const orderStatusMap = {
+      [OrderState.DRAFT]: OrderStatus.DRAFT,
+      [OrderState.SUBMITTED]: OrderStatus.SUBMITTED,
+      [OrderState.PENDING]: OrderStatus.PENDING,
+      [OrderState.CANCELED]: OrderStatus.CANCELED,
+    };
+
+    if (order.state in orderStatusMap) {
+      return orderStatusMap[order.state];
+    }
+
+    return null;
+  }
+
   /**
    * return an Order from the given list that match given productId
    */
@@ -33,4 +75,16 @@ export class OrderHelper {
       !(order.contract && order.contract.student_signed_on)
     );
   }
+
+  /**
+   * tell us if a order need to be sign by the organization.
+   */
+  static orderNeedsCounterSignature(order: Order | NestedCourseOrder) {
+    return (
+      order?.state === OrderState.VALIDATED &&
+      order.contract &&
+      order.contract.student_signed_on &&
+      !order.contract.organization_signed_on
+    );
+  }
 }

package/js/utils/test/factories/joanie.ts

@@ -146,7 +146,7 @@ export const ContractFactory = factory((): Contract => {
 export const ContractLightFactory = factory((): ContractLight => {
   return {
     id: faker.string.uuid(),
-    student_signed_on: faker.date.past().toISOString(),
+    student_signed_on: null,
     organization_signed_on: null,
   };
 });

package/js/utils/test/wrappers/BaseAppWrapper.tsx

@@ -0,0 +1,19 @@
+import { PropsWithChildren } from 'react';
+import { SessionProvider } from 'contexts/SessionContext';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const BaseAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+      <ReactQueryWrapper {...(queryOptions || {})}>
+        <SessionProvider>{children}</SessionProvider>
+      </ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/BaseJoanieAppWrapper.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { IntlWrapper } from './IntlWrapper';
+import { ReactQueryWrapper } from './ReactQueryWrapper';
+import { AppWrapperProps } from './types';
+
+export const BaseJoanieAppWrapper = ({
+  children,
+  intlOptions,
+  queryOptions,
+}: PropsWithChildren<AppWrapperProps>) => {
+  return (
+    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+      <ReactQueryWrapper {...(queryOptions || {})}>
+        <JoanieSessionProvider>{children}</JoanieSessionProvider>
+      </ReactQueryWrapper>
+    </IntlWrapper>
+  );
+};

package/js/utils/test/wrappers/JoanieAppWrapper.tsx

@@ -1,12 +1,10 @@
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { PropsWithChildren } from 'react';
 import fetchMock from 'fetch-mock';
-import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
-import { IntlWrapper } from './IntlWrapper';
-import { ReactQueryWrapper } from './ReactQueryWrapper';
 import { RouterWrapper } from './RouterWrapper';
 import { AppWrapperProps } from './types';
+import { BaseJoanieAppWrapper } from './BaseJoanieAppWrapper';
 
 export const setupJoanieSession = () => {
   beforeEach(() => {
@@ -21,10 +19,6 @@ export const setupJoanieSession = () => {
   };
 };
 
-export const JoanieSessionWrapper = ({ children }: PropsWithChildren) => {
-  return <JoanieSessionProvider>{children}</JoanieSessionProvider>;
-};
-
 export const JoanieAppWrapper = ({
   children,
   intlOptions,
@@ -32,16 +26,12 @@ export const JoanieAppWrapper = ({
   routerOptions,
 }: PropsWithChildren<AppWrapperProps>) => {
   return (
-    <IntlWrapper {...(intlOptions || { locale: 'en' })}>
+    <BaseJoanieAppWrapper intlOptions={intlOptions} queryOptions={queryOptions}>
       <CunninghamProvider>
-        <ReactQueryWrapper {...(queryOptions || {})}>
-          <JoanieSessionWrapper>
-            <DashboardBreadcrumbsProvider>
-              <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
-            </DashboardBreadcrumbsProvider>
-          </JoanieSessionWrapper>
-        </ReactQueryWrapper>
+        <DashboardBreadcrumbsProvider>
+          <RouterWrapper {...routerOptions}>{children}</RouterWrapper>
+        </DashboardBreadcrumbsProvider>
       </CunninghamProvider>
-    </IntlWrapper>
+    </BaseJoanieAppWrapper>
   );
 };

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -20,7 +20,7 @@ import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
 import { DashboardItemContract } from '../Contract';
-import OrderStateMessage from './OrderStateMessage';
+import OrderStateLearnerMessage from './OrderStateLearnerMessage';
 
 const messages = defineMessages({
   accessCourse: {
@@ -159,7 +159,7 @@ export const DashboardItemOrder = ({
             <div className="dashboard-item-order__footer">
               <div className="dashboard-item__block__status">
                 <Icon name={IconTypeEnum.SCHOOL} />
-                <OrderStateMessage
+                <OrderStateLearnerMessage
                   order={order}
                   contractDefinition={product?.contract_definition}
                 />

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -1,13 +1,9 @@
 // FIXME: this test is about useUnionResource behavior.
 // we need to rewrite it in useUnionResource tests suite as small and generic as possible.
-import { QueryClientProvider } from '@tanstack/react-query';
-import { IntlProvider } from 'react-intl';
 import fetchMock from 'fetch-mock';
-import { act, render, screen, waitFor, within } from '@testing-library/react';
+import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
   ContractFactory,
@@ -19,6 +15,9 @@ import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessa
 import { Deferred } from 'utils/test/deferred';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { CONTRACT_SETTINGS } from 'settings';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -35,31 +34,15 @@ jest.mock('hooks/useIntersectionObserver', () => ({
 }));
 
 describe('<DashboardItemOrder/> Contract', () => {
-  const Wrapper = (route: string) => {
-    return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <SessionProvider>
-            <DashboardTest initialRoute={route} />
-          </SessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
-    );
-  };
+  setupJoanieSession();
 
   beforeEach(() => {
     jest.useFakeTimers();
     jest.clearAllTimers();
-
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
   });
 
   afterEach(() => {
     jest.restoreAllMocks();
-    jest.clearAllMocks();
-    fetchMock.restore();
   });
 
   describe('writable', () => {
@@ -103,9 +86,10 @@ describe('<DashboardItemOrder/> Contract', () => {
       // RTL too. See https://github.com/testing-library/user-event/issues/833.
       const user = userEvent.setup({ delay: null });
 
-      render(Wrapper(LearnerDashboardPaths.COURSES));
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
 
-      // console.log('apiCalls:2', fetchMock.calls().length);
       await expectNoSpinner('Loading orders and enrollments...');
 
       expect(

package/js/widgets/Dashboard/components/DashboardItem/Order/{OrderStateMessage → OrderStateLearnerMessage}/index.spec.tsx

@@ -7,22 +7,10 @@ import {
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
-import OrderStateMessage, { messages } from '.';
+import OrderStateLearnerMessage, { messages } from '.';
 
 const intl = createIntl({ locale: 'en' });
 
-/*
-  @TODO (rlecellier): Rewrite everything with these guidlignes
-  Order lifecycle:
-    * Draft: order has been created
-    * Submitted: order information have been validated
-    * Pending: payment has failed but can be retried
-    * Validated:
-        * Completed (Validated with generated certificate)
-        * On going (Validated without generated certificate)
-        * Signature needed: !order.product.contract.isSign
-    * Canceled: has been canceled
-*/
 describe('<DashboardItemOrder/>', () => {
   const Wrapper = ({ children }: PropsWithChildren) => (
     <IntlProvider locale="en">{children}</IntlProvider>
@@ -39,7 +27,7 @@ describe('<DashboardItemOrder/>', () => {
       const order = CredentialOrderFactory({ state }).one();
       render(
         <Wrapper>
-          <OrderStateMessage order={order} />
+          <OrderStateLearnerMessage order={order} />
         </Wrapper>,
       );
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
@@ -60,7 +48,7 @@ describe('<DashboardItemOrder/>', () => {
       }).one();
       render(
         <Wrapper>
-          <OrderStateMessage order={orderWithContract} />
+          <OrderStateLearnerMessage order={orderWithContract} />
         </Wrapper>,
       );
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
@@ -77,7 +65,7 @@ describe('<DashboardItemOrder/>', () => {
 
     render(
       <Wrapper>
-        <OrderStateMessage order={order} contractDefinition={contractDefinition} />
+        <OrderStateLearnerMessage order={order} contractDefinition={contractDefinition} />
       </Wrapper>,
     );
     expect(screen.getByText('Signature required')).toBeInTheDocument();
@@ -91,7 +79,7 @@ describe('<DashboardItemOrder/>', () => {
     }).one();
     render(
       <Wrapper>
-        <OrderStateMessage order={order} />
+        <OrderStateLearnerMessage order={order} />
       </Wrapper>,
     );
     expect(
@@ -104,12 +92,15 @@ describe('<DashboardItemOrder/>', () => {
   it('should display message for validated order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
       state: OrderState.VALIDATED,
-      contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
+      contract: ContractFactory({
+        student_signed_on: new Date().toISOString(),
+        organization_signed_on: new Date().toISOString(),
+      }).one(),
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
     render(
       <Wrapper>
-        <OrderStateMessage order={order} />
+        <OrderStateLearnerMessage order={order} />
       </Wrapper>,
     );
     expect(

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateLearnerMessage/index.tsx

@@ -0,0 +1,60 @@
+import { defineMessages } from 'react-intl';
+import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+
+export const messages = defineMessages({
+  statusDraft: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusDraft',
+    description: 'Status shown on the dashboard order item when order is draft.',
+    defaultMessage: 'Draft',
+  },
+  statusSubmitted: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusSubmitted',
+    description: 'Status shown on the dashboard order item when order is submitted.',
+    defaultMessage: 'Submitted',
+  },
+  statusPending: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusPending',
+    description: 'Status shown on the dashboard order item when order is pending.',
+    defaultMessage: 'Pending',
+  },
+  statusOnGoing: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusOnGoing',
+    description:
+      'Status shown on the dashboard order item when order is validated with no certificate',
+    defaultMessage: 'On going',
+  },
+  statusCompleted: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusCompleted',
+    description:
+      'Status shown on the dashboard order item when order is validated with certificate',
+    defaultMessage: 'Completed',
+  },
+  statusWaitingSignature: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
+    defaultMessage: 'Signature required',
+  },
+  statusWaitingCounterSignature: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingCounterSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
+    defaultMessage: 'On going',
+  },
+  statusCanceled: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusCanceled',
+    description: 'Status shown on the dashboard order item when order is canceled',
+    defaultMessage: 'Canceled',
+  },
+  statusOther: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusOther',
+    description: 'Status shown on the dashboard order item when order status is unknown',
+    defaultMessage: '{state}',
+  },
+});
+
+const OrderStateLearnerMessage = (props: OrderStateMessageBaseProps) => {
+  return <OrderStateMessage {...props} messages={messages} />;
+};
+
+export default OrderStateLearnerMessage;

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage/index.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, MessageDescriptor } from 'react-intl';
 import { useEffect } from 'react';
 import {
   CertificateOrder,
@@ -9,96 +9,46 @@ import {
 } from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 import { handle } from 'utils/errors/handle';
-import { OrderHelper } from 'utils/OrderHelper';
+import { OrderHelper, OrderStatus } from 'utils/OrderHelper';
 
-export const messages = defineMessages({
-  statusDraft: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusDraft',
-    description: 'Status shown on the dashboard order item when order is draft.',
-    defaultMessage: 'Draft',
-  },
-  statusSubmitted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusSubmitted',
-    description: 'Status shown on the dashboard order item when order is submitted.',
-    defaultMessage: 'Submitted',
-  },
-  statusPending: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusPending',
-    description: 'Status shown on the dashboard order item when order is pending.',
-    defaultMessage: 'Pending',
-  },
-  statusOnGoing: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOnGoing',
-    description:
-      'Status shown on the dashboard order item when order is validated with no certificate',
-    defaultMessage: 'On going',
-  },
-  statusCompleted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCompleted',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate',
-    defaultMessage: 'Completed',
-  },
-  statusWaitingSignature: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingSignature',
-    description:
-      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
-    defaultMessage: 'Signature required',
-  },
-  statusCanceled: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCanceled',
-    description: 'Status shown on the dashboard order item when order is canceled',
-    defaultMessage: 'Canceled',
-  },
-  statusOther: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOther',
-    description: 'Status shown on the dashboard order item when order status is unknown',
-    defaultMessage: '{state}',
-  },
-});
-
-interface OrderStateMessageProps {
+export interface OrderStateMessageBaseProps {
   order: CredentialOrder | CertificateOrder | NestedCourseOrder;
   contractDefinition?: ContractDefinition;
 }
 
-const OrderStateMessage = ({ order, contractDefinition }: OrderStateMessageProps) => {
-  const { certificate_id: certificateId } = order;
-  const orderStatusMessages = {
-    [OrderState.DRAFT]: messages.statusDraft,
-    [OrderState.SUBMITTED]: messages.statusSubmitted,
-    [OrderState.PENDING]: messages.statusPending,
-    [OrderState.CANCELED]: messages.statusCanceled,
-  };
+interface OrderStateMessageProps extends OrderStateMessageBaseProps {
+  messages: Record<string, MessageDescriptor>;
+}
 
+const OrderStateMessage = ({ order, contractDefinition, messages }: OrderStateMessageProps) => {
   useEffect(() => {
     if (!Object.values(OrderState).includes(order.state)) {
       handle(new Error(`Unknown order state ${order.state}`));
     }
   }, [order.state]);
 
-  if (order.state === OrderState.VALIDATED) {
-    if (OrderHelper.orderNeedsSignature(order, contractDefinition)) {
-      return <FormattedMessage {...messages.statusWaitingSignature} />;
-    }
-
-    if (certificateId) {
-      return <FormattedMessage {...messages.statusCompleted} />;
-    } else {
-      return <FormattedMessage {...messages.statusOnGoing} />;
-    }
-  }
-
-  if (order.state in orderStatusMessages) {
-    return <FormattedMessage {...orderStatusMessages[order.state]} />;
+  const orderStatusMessagesMap = {
+    [OrderStatus.DRAFT]: messages.statusDraft,
+    [OrderStatus.SUBMITTED]: messages.statusSubmitted,
+    [OrderStatus.PENDING]: messages.statusPending,
+    [OrderStatus.CANCELED]: messages.statusCanceled,
+    [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,
+    [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
+    [OrderStatus.COMPLETED]: messages.statusCompleted,
+    [OrderStatus.ON_GOING]: messages.statusOnGoing,
+  };
+  const status = OrderHelper.getState(order, contractDefinition);
+
+  if (status === null) {
+    return (
+      <FormattedMessage
+        {...messages.statusOther}
+        values={{ state: StringHelper.capitalizeFirst(order.state) }}
+      />
+    );
   }
 
-  return (
-    <FormattedMessage
-      {...messages.statusOther}
-      values={{ state: StringHelper.capitalizeFirst(order.state) }}
-    />
-  );
+  return <FormattedMessage {...orderStatusMessagesMap[status]} />;
 };
 
 export default OrderStateMessage;

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.spec.tsx

@@ -0,0 +1,127 @@
+import React, { PropsWithChildren } from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import {
+  ContractDefinitionFactory,
+  ContractFactory,
+  CredentialOrderFactory,
+} from 'utils/test/factories/joanie';
+import { OrderState } from 'types/Joanie';
+import OrderStateTeacherMessage, { messages } from '.';
+
+const intl = createIntl({ locale: 'en' });
+
+describe('<OrderStateTeacherMessage/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <IntlProvider locale="en">{children}</IntlProvider>
+  );
+
+  it.each([
+    [OrderState.DRAFT, 'Pending'],
+    [OrderState.SUBMITTED, 'Pending'],
+    [OrderState.PENDING, 'Pending'],
+    [OrderState.CANCELED, 'Canceled'],
+  ])(
+    'should display message from order state: %s when order have no contract',
+    (state, expectedMessage) => {
+      const order = CredentialOrderFactory({ state }).one();
+      render(
+        <Wrapper>
+          <OrderStateTeacherMessage order={order} />
+        </Wrapper>,
+      );
+      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    [OrderState.DRAFT, 'Pending'],
+    [OrderState.SUBMITTED, 'Pending'],
+    [OrderState.PENDING, 'Pending'],
+    [OrderState.CANCELED, 'Canceled'],
+  ])(
+    'should display message from order state: %s when order have contract',
+    (state, expectedMessage) => {
+      const orderWithContract = CredentialOrderFactory({
+        state,
+        contract: ContractFactory().one(),
+      }).one();
+      render(
+        <Wrapper>
+          <OrderStateTeacherMessage
+            order={orderWithContract}
+            contractDefinition={ContractDefinitionFactory().one()}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+    },
+  );
+
+  it('should display message for validated order that need learner signature', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      contract: null,
+    }).one();
+
+    const contractDefinition = ContractDefinitionFactory().one();
+
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
+      </Wrapper>,
+    );
+    expect(screen.getByText("Pending for learner's signature")).toBeInTheDocument();
+  });
+
+  it('should display message for validated order that need organization signature', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      contract: ContractFactory({
+        student_signed_on: new Date().toISOString(),
+      }).one(),
+    }).one();
+    const contractDefinition = ContractDefinitionFactory().one();
+
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
+      </Wrapper>,
+    );
+    expect(screen.getByText('To be signed')).toBeInTheDocument();
+  });
+
+  it("should display message for validated order that don't have a generated certificate", () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      certificate_id: undefined,
+    }).one();
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByText(intl.formatMessage(messages.statusOnGoing), {
+        exact: false,
+      }),
+    );
+  });
+
+  it('should display message for validated order that have a generated certificate', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      certificate_id: 'FAKE_CERTIFICATE_ID',
+    }).one();
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByText(intl.formatMessage(messages.statusCompleted), {
+        exact: false,
+      }),
+    );
+  });
+});

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.tsx

@@ -0,0 +1,60 @@
+import { defineMessages } from 'react-intl';
+import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+
+export const messages = defineMessages({
+  statusDraft: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusDraft',
+    description: 'Status shown on the dashboard order item when order is draft.',
+    defaultMessage: 'Pending',
+  },
+  statusSubmitted: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusSubmitted',
+    description: 'Status shown on the dashboard order item when order is submitted.',
+    defaultMessage: 'Pending',
+  },
+  statusPending: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPending',
+    description: 'Status shown on the dashboard order item when order is pending.',
+    defaultMessage: 'Pending',
+  },
+  statusOnGoing: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOnGoing',
+    description:
+      'Status shown on the dashboard order item when order is validated with no certificate',
+    defaultMessage: 'Enrolled',
+  },
+  statusCompleted: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCompleted',
+    description:
+      'Status shown on the dashboard order item when order is validated with certificate',
+    defaultMessage: 'Certified',
+  },
+  statusWaitingSignature: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
+    defaultMessage: "Pending for learner's signature",
+  },
+  statusWaitingCounterSignature: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingCounterSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
+    defaultMessage: 'To be signed',
+  },
+  statusCanceled: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCanceled',
+    description: 'Status shown on the dashboard order item when order is canceled',
+    defaultMessage: 'Canceled',
+  },
+  statusOther: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOther',
+    description: 'Status shown on the dashboard order item when order status is unknown',
+    defaultMessage: '{state}',
+  },
+});
+
+const OrderStateTeacherMessage = (props: OrderStateMessageBaseProps) => {
+  return <OrderStateMessage {...props} messages={messages} />;
+};
+
+export default OrderStateTeacherMessage;

package/package.json

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