richie-education 2.25.0-b2.dev35 → 2.25.0-b2.dev42

package/js/components/Badge/index.tsx

@@ -6,6 +6,7 @@ type BadgeProps = PropsWithChildren<{
 }>;
 const Badge = ({ children, color }: BadgeProps) => (
   <div
+    data-testid="badge"
     className={classNames('category-badge', {
       [`category-badge--${color}`]: Boolean(color),
     })}

package/js/components/PurchaseButton/index.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 import { Button, ButtonProps } from '@openfun/cunningham-react';
 import { useSession } from 'contexts/SessionContext';
 import * as Joanie from 'types/Joanie';
-import SaleTunnel from 'components/SaleTunnel';
+import SaleTunnel, { SaleTunnelProps } from 'components/SaleTunnel';
 import { isOpenedCourseRunCertificate, isOpenedCourseRunCredential } from 'utils/CourseRuns';
 
 const messages = defineMessages({
@@ -45,6 +45,7 @@ interface PurchaseButtonPropsBase {
   disabled?: boolean;
   className?: string;
   buttonProps?: ButtonProps;
+  onFinish?: SaleTunnelProps['onFinish'];
 }
 
 interface CredentialPurchaseButtonProps extends PurchaseButtonPropsBase {
@@ -67,6 +68,7 @@ const PurchaseButton = ({
   disabled = false,
   className,
   buttonProps,
+  onFinish,
 }: CredentialPurchaseButtonProps | CertificatePurchaseButtonProps) => {
   const intl = useIntl();
   const { user, login } = useSession();
@@ -147,6 +149,7 @@ const PurchaseButton = ({
         enrollment={enrollment}
         orderGroup={orderGroup}
         course={course}
+        onFinish={onFinish}
       />
     </>
   );

package/js/components/SaleTunnel/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useQueryClient } from '@tanstack/react-query';
 import { Modal } from 'components/Modal';
 import {
   CourseLight,
@@ -49,13 +50,14 @@ const focusCurrentStep = (container: HTMLElement) => {
   }
 };
 
-interface SaleTunnelProps {
+export interface SaleTunnelProps {
   isOpen: boolean;
   onClose: () => void;
   course?: CourseLight;
   enrollment?: Enrollment;
   product: CredentialProduct | CertificateProduct;
   orderGroup?: OrderGroup;
+  onFinish?: (order: Order) => void;
 }
 
 const SaleTunnel = ({
@@ -65,6 +67,7 @@ const SaleTunnel = ({
   onClose,
   enrollment,
   orderGroup,
+  onFinish,
 }: SaleTunnelProps) => {
   const intl = useIntl();
   const {
@@ -76,6 +79,7 @@ const SaleTunnel = ({
   const key = `${product.type === ProductType.CREDENTIAL ? course!.code : enrollment!.id}+${
     product.id
   }`;
+  const queryClient = useQueryClient();
 
   const [order, setOrder] = useState<Maybe<Order>>();
 
@@ -108,6 +112,8 @@ const SaleTunnel = ({
           // to update the ordersQuery cache
           invalidateOrders();
           refetchOmniscientOrders();
+          queryClient.invalidateQueries({ queryKey: ['user', 'enrollments'] });
+          onFinish?.(order!);
         },
         onExit: () => {
           handleModalClose();

package/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -102,7 +102,7 @@ describe('components/TeacherDashboardCourseList', () => {
     );
 
     expect(
-      screen.getByRole('heading', { name: /One lesson about: How to cook birds/ }),
+      await screen.findByRole('heading', { name: /One lesson about: How to cook birds/ }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole('heading', { name: /One lesson about: Let's dance, the online lesson/ }),

package/js/hooks/useCourseProductUnion/index.ts

@@ -51,5 +51,6 @@ export const useCourseProductUnion = ({
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/hooks/useQueryKeyInvalidateListener.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import usePrevious from 'hooks/usePrevious';
+
+export const useQueryKeyInvalidateListener = (queryKey: string[], callback: Function) => {
+  const { data: refreshFlag } = useQuery({
+    queryKey: [...queryKey, 'refresh-flag'],
+    queryFn: () => Math.random(),
+  });
+  const previousRefreshFlag = usePrevious(refreshFlag);
+  useEffect(() => {
+    if (previousRefreshFlag) {
+      callback();
+    }
+  }, [refreshFlag]);
+};

package/js/hooks/useUnionResource/index.ts

@@ -4,6 +4,7 @@ import { MessageDescriptor, defineMessages, useIntl } from 'react-intl';
 import { Maybe } from 'yup';
 import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { PER_PAGE } from 'settings';
+import { useQueryKeyInvalidateListener } from 'hooks/useQueryKeyInvalidateListener';
 import { syncIntegrityCount } from './utils/syncIntegrityCount';
 import { FetchEntityData } from './utils/fetchEntities';
 import { QueryConfig } from './utils/fetchEntity';
@@ -39,6 +40,7 @@ interface UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>
   queryAConfig: QueryConfig<DataA, FiltersA>;
   queryBConfig: QueryConfig<DataB, FiltersB>;
   errorGetMessage?: MessageDescriptor;
+  refetchOnInvalidation?: boolean;
 }
 
 /**
@@ -58,6 +60,7 @@ const useUnionResource = <
   queryBConfig,
   perPage = PER_PAGE.useUnionResources,
   errorGetMessage = messages.errorGet,
+  refetchOnInvalidation = true,
 }: UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>): UseUnionResourceReturns<
   DataA,
   DataB
@@ -69,7 +72,7 @@ const useUnionResource = <
   const [totalCount, setTotalCount] = useState<number | undefined>();
   const [error, setError] = useState<Maybe<string>>();
 
-  // cursor is the total amount of entities what we whant to display.
+  // cursor is the total amount of entities what we want to display.
   const [cursor, setCursor] = useState(perPage);
 
   // integrityCount is the number of fetched entities A and B that are correctly ordered.
@@ -87,6 +90,20 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
+  const reset = () => {
+    setStack([]);
+    setPage(0);
+    setTotalCount(undefined);
+    setError(undefined);
+    setCursor(perPage);
+    setIntegrityCount(0);
+  };
+
+  if (refetchOnInvalidation) {
+    useQueryKeyInvalidateListener(queryAConfig.queryKey, reset);
+    useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
+  }
+
   useEffect(() => {
     async function fetchNewPage() {
       const {
@@ -132,7 +149,7 @@ const useUnionResource = <
       setIsSyncing(true);
       fetchNewPage();
     }
-  }, [cursor]);
+  }, [cursor, stack.length]); // stack.length is added in the dependency array to force a new fetch on reset.
 
   const cursorToUse = Math.min(cursor, integrityCount);
   const next = () => {

package/js/pages/DashboardCourses/useOrdersEnrollments.tsx

@@ -68,5 +68,6 @@ export const useOrdersEnrollments = ({
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/utils/CreditCardHelper/index.spec.tsx

@@ -27,19 +27,16 @@ describe('CreditCardHelper', () => {
   });
 
   it('is soon expired', () => {
-    const refDate = new Date();
-    refDate.setMonth(refDate.getMonth() + 1);
-    refDate.setDate(1);
-    const futureLessThan3Months = faker.date.future({
+    const expirationDate = faker.date.future({
+      refDate: new Date(),
       years: 2.99 / 12,
-      refDate,
     });
 
     expect(
       CreditCardHelper.getExpirationState(
         CreditCardFactory({
-          expiration_month: futureLessThan3Months.getMonth() + 1,
-          expiration_year: futureLessThan3Months.getFullYear(),
+          expiration_month: expirationDate.getMonth() + 1,
+          expiration_year: expirationDate.getFullYear(),
         }).one(),
       ),
     ).toBe(CreditCardExpirationStatus.SOON);

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.spec.tsx

@@ -1,7 +1,8 @@
 import { IntlProvider } from 'react-intl';
-import { render, screen } from '@testing-library/react';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
 import { CertificateProduct, CourseLight, OrderState, ProductType } from 'types/Joanie';
 import {
   CourseStateFactory,
@@ -19,6 +20,12 @@ import {
 import { Priority } from 'types';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { PER_PAGE } from 'settings';
+import { SaleTunnelProps } from 'components/SaleTunnel';
 import ProductCertificateFooter, { ProductCertificateFooterProps } from '.';
 
 jest.mock('utils/context', () => ({
@@ -28,6 +35,24 @@ jest.mock('utils/context', () => ({
     joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
   }).one(),
 }));
+jest.mock('components/SaleTunnel', () => ({
+  __esModule: true,
+  default: ({ isOpen, onFinish }: SaleTunnelProps) => {
+    const React = require('react');
+    const Factories = require('utils/test/factories/joanie');
+    // Automatically call onFinish() callback after 100ms when the SaleTunnel is opened to simulate a payment.
+    React.useEffect(() => {
+      if (!isOpen) {
+        return;
+      }
+      setTimeout(() => {
+        const order = Factories.CertificateOrderWithOneClickPaymentFactory().one();
+        onFinish?.(order);
+      }, 100);
+    }, [isOpen]);
+    return <div data-testid="SaleTunnelMock" />;
+  },
+}));
 
 describe('<ProductCertificateFooter/>', () => {
   const Wrapper = ({ product, enrollment }: ProductCertificateFooterProps) => (
@@ -165,4 +190,66 @@ describe('<ProductCertificateFooter/>', () => {
     expect(await screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
+
+  // From https://github.com/openfun/richie/issues/2237
+  it('should hide purchase button after payment', async () => {
+    const TestWrapper = ({ 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 client = createTestQueryClient({ user: true });
+    fetchMock.get(
+      `https://joanie.endpoint.test/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      {
+        results: [],
+        next: null,
+        previous: null,
+        count: 0,
+      },
+    );
+
+    const enrollment = EnrollmentFactory({
+      course_run: CourseRunFactory({
+        state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+        course,
+      }).one(),
+    }).one();
+    enrollment.product_relations[0].product = CertificateProductFactory().one();
+
+    fetchMock.get(
+      `https://joanie.endpoint.test/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      {
+        results: [enrollment],
+        next: null,
+        previous: null,
+        count: 1,
+      },
+    );
+
+    render(<TestWrapper client={client} />);
+    const user = userEvent.setup();
+    await expectNoSpinner('Loading orders and enrollments...');
+    await screen.findByRole('heading', {
+      name: enrollment.course_run.course.title,
+      level: 5,
+    });
+
+    // Click on the purchase button, memo: the SaleTunnel is mocked at the top of this file.
+    const purchaseButton = screen.getByTestId('PurchaseButton__cta');
+    await user.click(purchaseButton);
+
+    // Then the onFinish() callback of the SaleTunnel is automatically called via the mock.
+    await waitForElementToBeRemoved(screen.queryByTestId('PurchaseButton__cta'));
+  });
 });

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -1,4 +1,5 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
+import { useState } from 'react';
 import PurchaseButton from 'components/PurchaseButton';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CertificateProduct, Enrollment, ProductType } from 'types/Joanie';
@@ -35,7 +36,9 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
   if (product.type !== ProductType.CERTIFICATE) {
     return null;
   }
-  const activeOrder = getActiveEnrollmentOrder(enrollment.orders || [], product.id);
+  const [activeOrder, setActiveOrder] = useState(
+    getActiveEnrollmentOrder(enrollment.orders || [], product.id),
+  );
   const { item: certificate } = useCertificate(activeOrder?.certificate_id);
 
   // The course run is no longer available
@@ -69,6 +72,14 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           className="dashboard-item__button"
           product={product}
           enrollment={enrollment}
+          onFinish={(order) => {
+            /**
+             * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation ( to avoid
+             * scroll reset - and SaleTunnel modal unmounting too early caused by list reset ) we need to manually
+             * update the active order in the enrollment in order to hide the buy button and display the download button.
+             */
+            setActiveOrder(order);
+          }}
         />
       )}
     </div>

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.spec.tsx

@@ -0,0 +1,244 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import queryString from 'query-string';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import { MenuLink } from '../..';
+import ContractNavLink from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<ContractNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <IntlProvider locale="en">
+        <JoanieSessionProvider>
+          <MemoryRouter>{children}</MemoryRouter>
+        </JoanieSessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    // JoanieSessionProvider queries
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should render a ContractNavLink with route and label when neither organizationId and courseProductRelationId are given', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My contract navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <ContractNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My contract navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  describe('without sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: false };
+    it.each([
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+      },
+    ])(
+      'should never render Badge for organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({ organizationId, courseProductRelationId }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+      },
+    );
+  });
+
+  describe('with sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: true };
+    it.each([
+      // with 1 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+
+      // with 0 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+    ])(
+      'should render Badge (count: $expectedBadgeCount) for nb contracts to sign: $nbContractsToSign, organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({
+        nbContractsToSign,
+        organizationId,
+        courseProductRelationId,
+        expectedBadgeCount,
+      }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: nbContractsToSign,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        if (expectedBadgeCount === undefined) {
+          expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+        } else {
+          const $badge = await screen.findByTestId('badge');
+          expect($badge).toBeInTheDocument();
+          expect($badge).toHaveTextContent(`${expectedBadgeCount}`);
+        }
+      },
+    );
+  });
+});

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -0,0 +1,47 @@
+import { createSearchParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import useContractAbilities from 'hooks/useContractAbilities';
+import MenuNavLink from '../MenuNavLink';
+
+interface ContractNavLinkProps {
+  link: MenuLink;
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const ContractNavLink = ({
+  link,
+  organizationId,
+  courseProductRelationId,
+}: ContractNavLinkProps) => {
+  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
+    organizationId,
+    courseProductRelationId,
+  });
+  const contractAbilities = useContractAbilities(pendingContracts);
+  const canSignContracts = contractAbilities.can(ContractActions.SIGN);
+  const hasContractsToSign = useMemo(
+    () => canSignContracts && pendingContractCount > 0,
+    [canSignContracts, pendingContractCount],
+  );
+  const searchParams = useMemo(() => {
+    if (hasContractsToSign) {
+      return createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
+    }
+
+    return createSearchParams({ signature_state: ContractState.SIGNED });
+  }, [hasContractsToSign]);
+
+  return (
+    <MenuNavLink
+      link={{ ...link, to: `${link.to}?${searchParams.toString()}` }}
+      badgeCount={hasContractsToSign ? pendingContractCount : undefined}
+    />
+  );
+};
+
+export default ContractNavLink;

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { MenuLink } from '../..';
+import MenuNavLink from '.';
+
+describe('<MenuNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => <MemoryRouter>{children} </MemoryRouter>;
+  it('should render a MenuNavLink with route and label', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  it('should render a MenuNavLink with a badge', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} badgeCount={999} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.getByText('999')).toBeInTheDocument();
+  });
+});

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import { NavLink, useLocation } from 'react-router-dom';
+import Badge from 'components/Badge';
+import { MenuLink } from '../..';
+import { isMenuLinkActive } from '../../utils';
+
+interface MenuNavLinkProps {
+  link: MenuLink;
+  badgeCount?: number;
+}
+
+const MenuNavLink = ({ link, badgeCount }: MenuNavLinkProps) => {
+  const location = useLocation();
+  return (
+    <li
+      className={classNames('dashboard-sidebar__container__nav__item', {
+        active: isMenuLinkActive(link.to, location),
+      })}
+    >
+      <NavLink to={link.to} end>
+        {link.label}
+      </NavLink>
+      {badgeCount && <Badge color="primary">{badgeCount}</Badge>}
+    </li>
+  );
+};
+
+export default MenuNavLink;

package/js/widgets/Dashboard/components/DashboardSidebar/index.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
-import Badge from 'components/Badge';
+import MenuNavLink from './components/MenuNavLink';
 import { DashboardSidebar } from '.';
 
 export default {
@@ -19,7 +19,12 @@ export default {
               {
                 to: '/test/again',
                 label: 'An other menu link',
-                badge: <Badge color="primary">999</Badge>,
+                component: (
+                  <MenuNavLink
+                    link={{ to: '/test/again', label: 'An other menu link' }}
+                    badgeCount={999}
+                  />
+                ),
               },
             ]}
             header="Dashboard story header"

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

@@ -1,14 +1,13 @@
-import { matchPath, NavLink, resolvePath, useLocation } from 'react-router-dom';
-import { PropsWithChildren, ReactNode, useCallback } from 'react';
-import classNames from 'classnames';
+import { Fragment, PropsWithChildren, ReactNode } from 'react';
 import { useSession } from 'contexts/SessionContext';
 import { DashboardAvatar } from 'widgets/Dashboard/components/DashboardAvatar';
 import NavigationSelect from './components/NavigationSelect';
+import MenuNavLink from './components/MenuNavLink';
 
 export interface MenuLink {
   to: string;
   label: string;
-  badge?: ReactNode;
+  component?: ReactNode;
 }
 
 export interface DashboardSidebarProps extends PropsWithChildren {
@@ -28,15 +27,7 @@ export const DashboardSidebar = ({
   avatar,
 }: DashboardSidebarProps) => {
   const { user } = useSession();
-  const location = useLocation();
   const classes = ['dashboard-sidebar'];
-  const isActive = useCallback(
-    (to: string) => {
-      const path = resolvePath(to).pathname;
-      return !!matchPath({ path, end: true }, location.pathname);
-    },
-    [location],
-  );
 
   return (
     <aside className={classes.join(' ')} data-testid="dashboard__sidebar">
@@ -54,19 +45,13 @@ export const DashboardSidebar = ({
         </div>
 
         <ul className="dashboard-sidebar__container__nav">
-          {menuLinks.map((link) => (
-            <li
-              key={link.to}
-              className={classNames('dashboard-sidebar__container__nav__item', {
-                active: isActive(link.to),
-              })}
-            >
-              <NavLink to={link.to} end>
-                {link.label}
-              </NavLink>
-              {link.badge}
-            </li>
-          ))}
+          {menuLinks.map((link) =>
+            link.component ? (
+              <Fragment key={link.to}>{link.component}</Fragment>
+            ) : (
+              <MenuNavLink link={link} key={link.to} />
+            ),
+          )}
         </ul>
       </div>
       {children}

package/js/widgets/Dashboard/components/DashboardSidebar/utils.ts

@@ -0,0 +1,6 @@
+import { Location, matchPath, resolvePath } from 'react-router-dom';
+
+export const isMenuLinkActive = (to: string, location: Location) => {
+  const path = resolvePath(to).pathname;
+  return !!matchPath({ path, end: true }, location.pathname);
+};

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

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
@@ -111,7 +111,9 @@ describe('<TeacherDashboardOrganizationSidebar />', () => {
 
     // It should display contract link with badge next to it displaying the number of contracts to sign
     const contractLink = screen.getByRole('link', { name: 'Contracts' });
-    expect(contractLink!.nextSibling).toHaveTextContent(contractToSignCount.toString());
+    await waitFor(() => {
+      expect(contractLink!.nextSibling).toHaveTextContent(contractToSignCount.toString());
+    });
     expect(contractLink).toHaveAttribute(
       'href',
       '/teacher/organizations/' + organization.id + '/contracts?signature_state=half_signed',

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

@@ -1,20 +1,15 @@
-import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { createSearchParams, useParams } from 'react-router-dom';
-import Badge from 'components/Badge';
+import { useParams } from 'react-router-dom';
 import { Spinner } from 'components/Spinner';
 import { useOrganization } from 'hooks/useOrganizations';
-import { ContractState } from 'types/Joanie';
 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';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 
 const messages = defineMessages({
   subHeader: {
@@ -42,13 +37,6 @@ export const TeacherDashboardOrganizationSidebar = () => {
     states: { fetching },
   } = useOrganization(organizationId);
 
-  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
-    organizationId,
-    courseProductRelationId,
-  });
-  const contractAbilities = useContractAbilities(pendingContracts);
-  const canSignContracts = contractAbilities.can(ContractActions.SIGN);
-
   const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
     const path = getRoutePath(basePath, { organizationId });
 
@@ -57,30 +45,23 @@ export const TeacherDashboardOrganizationSidebar = () => {
       label: getRouteLabel(basePath),
     };
 
-    // For the contracts link, we want to display the number of contracts if needed and set
-    // the correct filter depending on the user's abilities
     if (basePath === TeacherDashboardPaths.ORGANIZATION_CONTRACTS) {
-      if (canSignContracts && pendingContractCount > 0) {
-        const searchParams = createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
-        menuLink.badge = <Badge color="primary">{pendingContractCount}</Badge>;
-        menuLink.to = `${path}?${searchParams.toString()}`;
-      } else {
-        const searchParams = createSearchParams({ signature_state: ContractState.SIGNED });
-        menuLink.to = `${path}?${searchParams.toString()}`;
-      }
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={organizationId}
+          courseProductRelationId={courseProductRelationId}
+        />
+      );
     }
 
     return menuLink;
   };
 
-  const links = useMemo(
-    () =>
-      [
-        TeacherDashboardPaths.ORGANIZATION_COURSES,
-        TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
-      ].map(getMenuLinkFromPath),
-    [pendingContractCount, canSignContracts],
-  );
+  const links = [
+    TeacherDashboardPaths.ORGANIZATION_COURSES,
+    TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
+  ].map(getMenuLinkFromPath);
 
   if (fetching) {
     return (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev35",
+  "version": "2.25.0-b2.dev42",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,20 +38,20 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.23.7",
+    "@babel/core": "7.23.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.23.3",
-    "@babel/preset-env": "7.23.8",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@faker-js/faker": "8.3.1",
-    "@formatjs/cli": "6.2.6",
+    "@faker-js/faker": "8.4.0",
+    "@formatjs/cli": "6.2.7",
     "@formatjs/intl-relativetimeformat": "11.2.12",
     "@hookform/resolvers": "3.3.4",
     "@openfun/cunningham-react": "2.4.0",
     "@openfun/cunningham-tokens": "2.1.0",
-    "@sentry/browser": "7.94.1",
-    "@sentry/types": "7.94.1",
+    "@sentry/browser": "7.98.0",
+    "@sentry/types": "7.98.0",
     "@storybook/addon-actions": "7.6.10",
     "@storybook/addon-essentials": "7.6.10",
     "@storybook/addon-interactions": "7.6.10",
@@ -64,7 +64,7 @@
     "@tanstack/react-query": "5.17.19",
     "@tanstack/react-query-persist-client": "5.17.19",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.2.1",
+    "@testing-library/jest-dom": "6.4.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/fetch-mock": "7.3.8",
@@ -78,9 +78,9 @@
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.2.18",
     "@types/react-modal": "3.16.3",
-    "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
@@ -95,7 +95,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-compat": "4.2.0",
-    "eslint-plugin-formatjs": "4.12.1",
+    "eslint-plugin-formatjs": "4.12.2",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
@@ -113,7 +113,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.1.4",
+    "msw": "2.1.5",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.0.3",
     "prettier": "3.2.4",
@@ -122,7 +122,7 @@
     "react-autosuggest": "10.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.49.3",
-    "react-intl": "6.6.1",
+    "react-intl": "6.6.2",
     "react-modal": "3.16.1",
     "react-router-dom": "6.21.3",
     "sass": "1.70.0",
@@ -131,7 +131,7 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.3.3",
     "uuid": "9.0.1",
-    "webpack": "5.89.0",
+    "webpack": "5.90.0",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",