richie-education 2.33.1-dev9 → 2.34.1-dev2

package/js/components/SearchInput/index.tsx

@@ -9,6 +9,11 @@ const messages = defineMessages({
     description: 'Accessibility text for the search button inside the Search input.',
     id: 'components.SearchInput.button',
   },
+  label: {
+    defaultMessage: 'Search',
+    description: 'Accessibility text for the search input label.',
+    id: 'components.SearchInput.label',
+  },
 });
 
 /**
@@ -23,7 +28,10 @@ export const SearchInput = ({
   onClick = () => {}, // by default, do nothing, this will just remove focus and close suggestions
 }: { inputProps: any; onClick?: () => void } & CommonDataProps) => (
   <div className="search-input">
-    <input {...inputProps} />
+    <label className="offscreen" htmlFor="search-input-field">
+      <FormattedMessage {...messages.label} />
+    </label>
+    <input {...inputProps} id="search-input-field" />
     <button className="search-input__btn" onClick={onClick}>
       <Icon name={IconTypeEnum.MAGNIFYING_GLASS} className="search-input__btn__icon" />{' '}
       <span className="offscreen">

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

@@ -175,4 +175,87 @@ describe('useCreditCards', () => {
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.tokenizing).toBe(false);
   });
+
+  it('promotes a credit card', async () => {
+    const responseDeferred = new Deferred();
+    fetchMock.patch(
+      'https://joanie.endpoint/api/v1.0/credit-cards/1/promote/',
+      responseDeferred.promise,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: false }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      result.current.methods.promote('1');
+    });
+
+    await waitFor(() => {
+      expect(result.current.states.updating).toBe(true);
+    });
+
+    expect(result.current.states.deleting).toBe(false);
+    expect(result.current.states.tokenizing).toBe(false);
+    expect(result.current.states.fetching).toBe(false);
+    expect(result.current.states.isFetched).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
+    expect(result.current.states.error).toBe(undefined);
+
+    await act(async () => {
+      responseDeferred.resolve({});
+    });
+
+    expect(result.current.states.updating).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.error).toBe(undefined);
+  });
+
+  it('manages error during credit card promotion', async () => {
+    fetchMock.patch(
+      'https://joanie.endpoint/api/v1.0/credit-cards/1/promote/',
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: true }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      await expect(result.current.methods.promote('1')).rejects.toThrow('Internal Server Error');
+    });
+
+    expect(result.current.states.error).toBe('Cannot set the credit card as default');
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.updating).toBe(false);
+  });
+
+  it('has a specific error when credit card deletion fails because it is used', async () => {
+    const creditCard = CreditCardFactory({
+      id: '1',
+      last_numbers: '1337',
+    }).one();
+    fetchMock.delete('https://joanie.endpoint/api/v1.0/credit-cards/1/', HttpStatusCode.CONFLICT);
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: true }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      result.current.methods.delete(creditCard);
+    });
+
+    expect(result.current.states.error).toBe(
+      'Cannot delete the credit card •••• •••• •••• 1337 because it is used to pay at least one of your order.',
+    );
+  });
 });

package/js/hooks/useCreditCards/index.ts

@@ -1,8 +1,10 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { MutateOptions } from '@tanstack/query-core';
 import { API, CreditCard } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { useSessionMutation } from 'utils/react-query/useSessionMutation';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import {
   QueryOptions,
   ResourcesQuery,
@@ -27,6 +29,13 @@ const messages = defineMessages({
     description: 'Error message shown to the user when credit card deletion request fails.',
     defaultMessage: 'An error occurred while deleting the credit card. Please retry later.',
   },
+  errorCannotDelete: {
+    id: 'hooks.useCreditCards.errorCannotDelete',
+    description:
+      'Error message shown to the user when trying to delete a credit card that is used to pay at least order.',
+    defaultMessage:
+      'Cannot delete the credit card •••• •••• •••• {last_numbers} because it is used to pay at least one of your order.',
+  },
   errorTokenize: {
     id: 'hooks.useCreditCards.errorTokenize',
     description: 'Error message shown to the user when credit card tokenize request fails.',
@@ -37,6 +46,11 @@ const messages = defineMessages({
     description: 'Error message shown to the user when no credit cards matches.',
     defaultMessage: 'Cannot find the credit card',
   },
+  errorPromote: {
+    id: 'hooks.useCreditCards.errorPromote',
+    description: 'Error message shown to the user when promoting a credit card fails.',
+    defaultMessage: 'Cannot set the credit card as default',
+  },
 });
 
 const useCreditCardResources =
@@ -55,17 +69,55 @@ const useCreditCardResources =
       },
       onError: () => custom.methods.setError(intl.formatMessage(messages.errorTokenize)),
     });
+    const promoteHandler = mutation({
+      mutationFn: api.promote,
+      onSuccess: async () => {
+        custom.methods.setError(undefined);
+        custom.methods.invalidate();
+        props.onMutationSuccess?.(queryClient);
+      },
+      onError: () => custom.methods.setError(intl.formatMessage(messages.errorPromote)),
+    });
+
+    /**
+     * Override the default delete mutation to handle error more specifically.
+     * If the error is a 409, it means the credit card is used to pay at least one order
+     * and the user should be informed about that.
+     */
+    const deleteMutateAsync = async (creditCard: CreditCard, options?: MutateOptions) => {
+      return custom.methods.delete(creditCard.id, {
+        ...options,
+        onError: (error: HttpError, variables, context) => {
+          if (error.code === HttpStatusCode.CONFLICT) {
+            custom.methods.setError(
+              intl.formatMessage(messages.errorCannotDelete, {
+                last_numbers: creditCard.last_numbers,
+              }),
+            );
+          } else {
+            custom.methods.setError(intl.formatMessage(messages.errorDelete));
+          }
+          options?.onError?.(error, variables, context);
+        },
+      });
+    };
 
     return {
       ...custom,
       methods: {
         ...custom.methods,
+        delete: deleteMutateAsync,
         tokenize: tokenizeHandler.mutateAsync,
+        promote: promoteHandler.mutateAsync,
       },
       states: {
         ...custom.states,
-        isPending: [tokenizeHandler, custom.states].some((value) => value?.isPending),
+        isPending: [tokenizeHandler, promoteHandler, custom.states].some(
+          (value) => value?.isPending,
+        ),
+        updating: custom.states.updating || promoteHandler.isPending,
         tokenizing: tokenizeHandler.isPending,
+        promoting: promoteHandler.isPending,
       },
     };
   };

package/js/hooks/useCreditCardsManagement.tsx

@@ -5,11 +5,6 @@ import { CreditCard } from 'types/Joanie';
 import { confirm } from 'utils/indirection/window';
 
 const messages = defineMessages({
-  errorCannotRemoveMain: {
-    id: 'hooks.useCreditCardsManagement.errorCannotRemoveMain',
-    description: 'Error shown if a user tries to delete a main credit card',
-    defaultMessage: 'Cannot remove main credit card.',
-  },
   deletionConfirmation: {
     id: 'hooks.useCreditCardsManagement.deletionConfirmation',
     description: 'Confirmation message shown to the user when he wants to delete a credit card',
@@ -23,15 +18,11 @@ export const useCreditCardsManagement = () => {
   const creditCards = useCreditCards();
 
   const safeDelete = (creditCard: CreditCard, options?: MutateOptions) => {
-    if (creditCard.is_main) {
-      creditCards.methods.setError(intl.formatMessage(messages.errorCannotRemoveMain));
-      return;
-    }
     const sure = confirm(intl.formatMessage(messages.deletionConfirmation));
     if (!sure) {
       return;
     }
-    creditCards.methods.delete(creditCard.id, options);
+    creditCards.methods.delete(creditCard, options);
   };
 
   return {

package/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
-import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
+import { Enrollment, CredentialOrder, ProductType, CANCELED_ORDER_STATES } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
 
@@ -23,7 +23,7 @@ const useLearnerCoursesSearch = () => {
     query,
     orderFilters: {
       product_type: [ProductType.CREDENTIAL],
-      state_exclude: [OrderState.CANCELED],
+      state_exclude: CANCELED_ORDER_STATES,
     },
   });
 

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

@@ -103,7 +103,13 @@ describe('<DashboardCourses/>', () => {
   it('renders an empty placeholder', async () => {
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     const enrollmentsDeferred = new Deferred();
@@ -145,25 +151,57 @@ describe('<DashboardCourses/>', () => {
       client,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(0, perPage),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credentia&state_exclude=canceled&page=2&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=2' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=2&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=2' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage, perPage * 2),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=3' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=3' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage * 2, perPage * 3),
         next: null,
@@ -237,7 +275,13 @@ describe('<DashboardCourses/>', () => {
     jest.spyOn(console, 'error').mockImplementation(noop);
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     fetchMock.get(

package/js/pages/DashboardCreditCardsManagement/DashboardCreditCardBox.tsx

@@ -76,11 +76,9 @@ export const DashboardCreditCardBox = ({ creditCard, promote, edit, remove }: Pr
               <FormattedMessage {...messages.edit} />
             </Button>
           </div>
-          {!creditCard.is_main && (
-            <Button color="primary" onClick={() => remove(creditCard)}>
-              <FormattedMessage {...messages.delete} />
-            </Button>
-          )}
+          <Button color="primary" onClick={() => remove(creditCard)}>
+            <FormattedMessage {...messages.delete} />
+          </Button>
         </>
       }
     >

package/js/pages/DashboardCreditCardsManagement/_styles.scss

@@ -2,12 +2,23 @@
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  position: relative;
 
   &__empty {
     text-align: center;
     color: r-theme-val(dashboard-credit-cards, empty-color);
     margin: 0;
   }
+
+  &__loading-overlay {
+    position: absolute;
+    pointer-events: none;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 9999;
+  }
 }
 
 .dashboard-credit-card {
@@ -34,9 +45,6 @@
     }
   }
 
-  &__data {
-  }
-
   &__brand {
     font-weight: bold;
 

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

@@ -191,7 +191,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
   });
 
   it('deletes a credit card', async () => {
-    const creditCards = CreditCardFactory().many(5);
+    const creditCards = CreditCardFactory().many(2);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     render(<DashboardPreferences />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -231,6 +231,46 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText(creditCard.title!)).toBeNull();
   });
 
+  it('deletes a main credit card', async () => {
+    const creditCard = CreditCardFactory({ is_main: true }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
+    render(<DashboardPreferences />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // Find the delete button of the credit card.
+    await screen.findByText(creditCard.title!);
+    const creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
+    const deleteButton = getByRole(creditCardContainer, 'button', {
+      name: 'Delete',
+    });
+
+    // Mock delete route and the refresh route to returns `creditCards` without the first one.
+    const deleteUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
+    fetchMock.delete(deleteUrl, []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [], {
+      overwriteRoutes: true,
+    });
+
+    // Clicking on the delete button calls delete API route.
+    expect(fetchMock.called(deleteUrl)).toBe(false);
+    // Clicking on the delete button calls window.confirm function.
+    expect(confirm).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+    expect(fetchMock.called(deleteUrl)).toBe(true);
+    expect(confirm).toHaveBeenCalled();
+
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // The address does not appear anymore in the list.
+    expect(screen.queryByText(creditCard.title!)).toBeNull();
+  });
+
   it('promotes a credit card', async () => {
     const creditCards = CreditCardFactory().many(5);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
@@ -251,8 +291,9 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(queryByText(creditCardContainer, 'Default credit card')).toBeNull();
 
     // Mock the update url and the refresh URL to return the first credit card as main.
-    const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
-    fetchMock.put(updateUrl, []);
+    const promoteUrl =
+      'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/promote/';
+    fetchMock.patch(promoteUrl, {});
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/credit-cards/',
       [{ ...creditCard, is_main: true }, ...creditCards.splice(1)],
@@ -260,11 +301,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     );
 
     // Clicking on the promote button calls the update API route.
-    expect(fetchMock.called(updateUrl)).toBe(false);
+    expect(fetchMock.called(promoteUrl)).toBe(false);
     await act(async () => {
       fireEvent.click(promoteButton);
     });
-    expect(fetchMock.called(updateUrl)).toBe(true);
+    expect(fetchMock.called(promoteUrl)).toBe(true);
 
     // Assert that "Default credit card" is displayed on the credit card's box.
     creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
@@ -298,26 +339,6 @@ describe('<DashboardCreditCardsManagement/>', () => {
       );
   });
 
-  it('cannot delete a main credit card', async () => {
-    const creditCards = CreditCardFactory().many(5);
-    const mainCreditCard = creditCards[3];
-    mainCreditCard.is_main = true;
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
-    render(<DashboardPreferences />, {
-      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-    });
-
-    // The delete button is not displayed.
-    const creditCardContainer = await screen.findByTestId(
-      'dashboard-credit-card__' + mainCreditCard.id,
-    );
-    expect(
-      queryByRole(creditCardContainer, 'button', {
-        name: 'Delete',
-      }),
-    ).toBeNull();
-  });
-
   it('cannot promote a main credit card', async () => {
     const creditCards = CreditCardFactory().many(5);
     const mainCreditCard = creditCards[3];

package/js/pages/DashboardCreditCardsManagement/index.tsx

@@ -13,11 +13,6 @@ const messages = defineMessages({
     description: 'Title of the dashboard credit cards management block',
     defaultMessage: 'Credit cards',
   },
-  errorCannotPromoteMain: {
-    id: 'components.DashboardCreditCardsManagement.errorCannotPromoteMain',
-    description: 'Error shown if a user tries to promote a main credit card',
-    defaultMessage: 'Cannot promote main credit card.',
-  },
   emptyList: {
     id: 'components.DashboardCreditCardsManagement.emptyList',
     description: 'Empty placeholder of the dashboard credit cards management block',
@@ -33,7 +28,7 @@ export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
   const intl = useIntl();
   const {
     states: { error, isPending },
-    methods: { setError, update, safeDelete },
+    methods: { promote, safeDelete },
     ...creditCards
   } = useCreditCardsManagement();
 
@@ -54,40 +49,29 @@ export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
     return creditCards.items.sort(sortByMainFirstThenByTitle);
   }, [creditCards.items]);
 
-  const promote = (creditCard: CreditCard) => {
-    if (creditCard.is_main) {
-      setError(intl.formatMessage(messages.errorCannotPromoteMain));
-      return;
-    }
-    update({
-      ...creditCard,
-      is_main: true,
-    });
-  };
-
   return (
     <DashboardCard header={<FormattedMessage {...messages.header} />}>
-      <div className="dashboard-credit-cards">
-        {isPending && <Spinner />}
-        {!isPending && (
-          <>
-            {error && <Banner message={error} type={BannerType.ERROR} rounded />}
-            {!error && creditCardsList.length === 0 && (
-              <p className="dashboard-credit-cards__empty">
-                <FormattedMessage {...messages.emptyList} />
-              </p>
-            )}
-            {creditCardsList.map((creditCard) => (
-              <DashboardCreditCardBox
-                creditCard={creditCard}
-                key={creditCard.id}
-                edit={(_creditCard) => onClickEdit?.(_creditCard)}
-                promote={promote}
-                remove={safeDelete}
-              />
-            ))}
-          </>
+      <div className="dashboard-credit-cards" aria-busy={isPending}>
+        {isPending && (
+          <div className="dashboard-credit-cards__loading-overlay">
+            <Spinner />
+          </div>
+        )}
+        {error && <Banner message={error} type={BannerType.ERROR} rounded />}
+        {!error && creditCardsList.length === 0 && (
+          <p className="dashboard-credit-cards__empty">
+            <FormattedMessage {...messages.emptyList} />
+          </p>
         )}
+        {creditCardsList.map((creditCard) => (
+          <DashboardCreditCardBox
+            key={creditCard.id}
+            creditCard={creditCard}
+            edit={(instance) => onClickEdit?.(instance)}
+            promote={({ id }) => promote(id)}
+            remove={safeDelete}
+          />
+        ))}
       </div>
     </DashboardCard>
   );

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

@@ -98,7 +98,7 @@ describe.each([
     expect(mockCheckArchive).not.toHaveBeenCalled();
   });
 
-  it('should check if archive exist when a id is stored', async () => {
+  it('should check if archive exist when an id is stored', async () => {
     storeContractArchiveId({
       ...localStorageArchiveFilters,
       contractArchiveId: faker.string.uuid(),
@@ -115,7 +115,9 @@ describe.each([
       expect(mockCheckArchive).toHaveBeenCalledTimes(1);
     });
 
-    expect(result.current.isPolling).toBe(false);
+    await waitFor(() => {
+      expect(result.current.isPolling).toBe(false);
+    });
     expect(result.current.isContractArchiveExists).toBe(true);
   });
 

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

@@ -25,7 +25,7 @@ const useCheckContractArchiveExist = (
   // stay null until fetched
   const [isContractArchiveExists, setIsContractArchiveExists] = useState<Nullable<boolean>>(null);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<NodeJS.Timeout>(undefined);
 
   // This method will check if the archive exists on the server
   // option.polling === true will recursivly poll archive existence

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

@@ -41,6 +41,9 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
   beforeEach(() => {
     nbApiCalls = joanieSessionData.nbSessionApiRequest;
   });
+  afterEach(() => {
+    fetchMock.restore();
+  });
 
   it('should render', async () => {
     const organization = OrganizationFactory().one();
@@ -59,6 +62,10 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
       mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
+      [],
+    );
 
     render(<TeacherDashboardOrganizationCourseLoader />, {
       routerOptions: {
@@ -70,6 +77,7 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
 
     nbApiCalls += 1; // course api call
     nbApiCalls += 1; // course-product-relations api call
+    nbApiCalls += 1; // contracts api call
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
@@ -78,11 +86,6 @@ describe('components/TeacherDashboardOrganizationCourseLoader', () => {
     expect(calledUrls).toContain(
       `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
-
-    fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&page=1`,
-      [],
-    );
     await expectNoSpinner('Loading organization...');
 
     expect(