richie-education 2.25.0-b2.dev49 → 2.25.0-b2.dev62

package/.nvmrc

@@ -1 +1 @@
-18.19.0
+20.11.0

package/js/components/PaymentButton/hooks/useTerms.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { PaymentErrorMessageId } from 'components/PaymentButton/index';
 import { Product } from 'types/Joanie';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
+import context from 'utils/context';
 
 const messages = defineMessages({
   termsMessage: {
@@ -33,7 +33,6 @@ export const useTerms = ({
   error?: PaymentErrorMessageId;
 }) => {
   const intl = useIntl();
-  const api = useJoanieApi();
   const [termsAccepted, setTermsAccepted] = useState(false);
   const validateTerms = () => {
     if (!product.contract_definition) {
@@ -44,18 +43,6 @@ export const useTerms = ({
     }
   };
 
-  const openContract = async (e: React.MouseEvent) => {
-    if (!product.contract_definition) {
-      return;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    const blob = await api.contractDefinitions.previewTemplate(product.contract_definition.id);
-    // eslint-disable-next-line compat/compat
-    const file = window.URL.createObjectURL(blob);
-    window.open(file);
-  };
-
   return {
     termsAccepted,
     validateTerms,
@@ -66,12 +53,14 @@ export const useTerms = ({
             label={
               <>
                 {intl.formatMessage(messages.termsMessage)}{' '}
-                <button
-                  onClick={openContract}
+                <a
+                  href={context.site_urls.terms_and_conditions ?? '#'}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   title={intl.formatMessage(messages.termsMessageLinkTitle)}
                 >
                   {intl.formatMessage(messages.termsMessageLink)}
-                </button>
+                </a>
               </>
             }
             onChange={(e) => setTermsAccepted(e.target.checked)}

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

@@ -54,6 +54,9 @@ jest.mock('utils/context', () => ({
     joanie_backend: {
       endpoint: 'https://joanie.test',
     },
+    site_urls: {
+      terms_and_conditions: '/en/about/terms-and-conditions/',
+    },
   }).one(),
 }));
 
@@ -177,7 +180,9 @@ describe.each([
         </Wrapper>,
       );
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -330,7 +335,9 @@ describe.each([
       nbApiCalls += 1; // fetch order for useProductOrder
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -455,7 +462,9 @@ describe.each([
         expect(screen.getByTestId('payment-button-order-loaded')).toBeInTheDocument();
       });
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -590,7 +599,9 @@ describe.each([
         `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
       );
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -703,7 +714,9 @@ describe.each([
       nbApiCalls += 1; // useProductOrder get order with filters
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -802,17 +815,9 @@ describe.each([
     });
 
     it('should be able to preview the contract if product has a contract definition', async () => {
-      // eslint-disable-next-line compat/compat
-      URL.createObjectURL = jest.fn((blob) => blob) as any;
-      window.open = jest.fn();
-
       const product: Joanie.Product = ProductFactory().one();
       const billingAddress: Joanie.Address = AddressFactory().one();
 
-      const PREVIEW_URL = `https://joanie.test/api/v1.0/contract_definitions/${
-        product.contract_definition!.id
-      }/preview_template/`;
-
       const fetchOrderQueryParams =
         product.type === ProductType.CREDENTIAL
           ? {
@@ -826,12 +831,10 @@ describe.each([
               state: ['pending', 'validated', 'submitted'],
             };
 
-      fetchMock
-        .get(
-          `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
-          [],
-        )
-        .get(PREVIEW_URL, 'preview content');
+      fetchMock.get(
+        `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
+        [],
+      );
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })} product={product}>
@@ -839,25 +842,8 @@ describe.each([
         </Wrapper>,
       );
 
-      const $terms = screen.getByRole('button', { name: 'General Terms of Sale' });
-
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
-      expect(window.open).toHaveBeenCalledTimes(0);
-      expect(fetchMock.called(PREVIEW_URL)).toBe(false);
-
-      // console.log($terms);
-      await act(async () => {
-        fireEvent.click($terms);
-      });
-
-      expect(fetchMock.called(PREVIEW_URL)).toBe(true);
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledWith('preview content');
-      expect(window.open).toHaveBeenCalledTimes(1);
-      expect(window.open).toHaveBeenCalledWith('preview content');
+      const $terms = screen.getByRole('link', { name: 'General Terms of Sale' });
+      expect($terms).toHaveAttribute('href', '/en/about/terms-and-conditions/');
     });
 
     it('should not show terms checkbox if the product does not have a contract definition', async () => {
@@ -959,7 +945,9 @@ describe.each([
           name: `Pay ${formatPrice(product.price, product.price_currency)}`,
         }) as HTMLButtonElement;
 
-        const $terms = screen.getByLabelText('By checking this box, you accept the');
+        const $terms = screen.getByLabelText(
+          'By checking this box, you accept the General Terms of Sale',
+        );
         await act(async () => {
           fireEvent.click($terms);
         });

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

@@ -12,7 +12,7 @@ import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError } from 'utils/test/expectBanner';
-import { HttpError } from 'utils/errors/HttpError';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import TeacherDashboardContracts from '.';
 
 jest.mock('utils/context', () => ({
@@ -82,12 +82,12 @@ describe('pages/TeacherDashboardContracts', () => {
     fetchMock.get(`https://joanie.test/api/v1.0/organizations/`, [organization]);
     // TeacherDashboardContracts request a paginated list of contracts to display
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=signed&course_product_relation_id=2&page=1&page_size=25`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=2&signature_state=signed&page=1&page_size=25`,
       { results: contracts, count: 0, previous: null, next: null },
     );
     // useTeacherContractsToSign request all contract to sign, without pagination
     fetchMock.get(
-      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed&course_product_relation_id=2`,
+      `https://joanie.test/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=2&signature_state=half_signed`,
       { results: [], count: 0, previous: null, next: null },
     );
 
@@ -244,6 +244,10 @@ describe('pages/TeacherDashboardContracts', () => {
       abilities: { sign: true },
     }).many(3);
 
+    fetchMock.get(
+      `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
+      { results: [], count: 0, previous: null, next: null },
+    );
     fetchMock.get(
       `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed&page=1&page_size=25`,
       { results: contracts, count: 3, previous: null, next: null },
@@ -309,15 +313,11 @@ describe('pages/TeacherDashboardContracts', () => {
   it('should render an error banner if an error occured during contracts fetching', async () => {
     fetchMock.get(
       `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=signed&page=1&page_size=25`,
-      () => {
-        throw new HttpError(404, 'Not found');
-      },
+      HttpStatusCode.NOT_FOUND,
     );
     fetchMock.get(
       `https://joanie.test/api/v1.0/organizations/1/contracts/?signature_state=half_signed`,
-      () => {
-        throw new HttpError(404, 'Not found');
-      },
+      HttpStatusCode.NOT_FOUND,
     );
 
     render(

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

@@ -87,10 +87,7 @@ describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
 
     render(
       <Wrapper>
-        <ContractActionsBar
-          courseProductRelationId={faker.string.uuid()}
-          organizationId={faker.string.uuid()}
-        />
+        <ContractActionsBar organizationId={faker.string.uuid()} />
       </Wrapper>,
     );
 
@@ -99,26 +96,47 @@ describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
     expect(screen.getByRole('button', { name: /Request contracts archive/ })).toBeInTheDocument();
   });
 
-  it("shouldn't only display sign button", () => {
-    mockHasContractToDownload = false;
-    mockCanSignContracts = true;
-    mockContractsToSignCount = 1;
-
-    render(
-      <Wrapper>
-        <ContractActionsBar
-          courseProductRelationId={faker.string.uuid()}
-          organizationId={faker.string.uuid()}
-        />
-      </Wrapper>,
-    );
-
-    expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /Sign all pending contracts/ })).toBeInTheDocument();
-    expect(
-      screen.queryByRole('button', { name: /Request contracts archive/ }),
-    ).not.toBeInTheDocument();
-  });
+  it.each([
+    {
+      label: "doesn't have contract to download",
+      hasContractToDownload: false,
+      courseProductRelationId: undefined,
+    },
+    {
+      label: 'has contract to download and courseProductRelationId',
+      hasContractToDownload: true,
+      courseProductRelationId: faker.string.uuid(),
+    },
+    {
+      label: "doesn't have contract to download  and courseProductRelationId",
+      hasContractToDownload: false,
+      courseProductRelationId: faker.string.uuid(),
+    },
+  ])(
+    "shouldn't only display sign button when $label",
+    ({ hasContractToDownload, courseProductRelationId }) => {
+      mockHasContractToDownload = hasContractToDownload;
+      mockCanSignContracts = true;
+      mockContractsToSignCount = 1;
+
+      render(
+        <Wrapper>
+          <ContractActionsBar
+            courseProductRelationId={courseProductRelationId}
+            organizationId={faker.string.uuid()}
+          />
+        </Wrapper>,
+      );
+
+      expect(screen.getByTestId('teacher-contracts-list-actionsBar')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', { name: /Sign all pending contracts/ }),
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', { name: /Request contracts archive/ }),
+      ).not.toBeInTheDocument();
+    },
+  );
 
   it("shouldn't only display download button", () => {
     mockHasContractToDownload = true;
@@ -127,10 +145,7 @@ describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
 
     render(
       <Wrapper>
-        <ContractActionsBar
-          courseProductRelationId={faker.string.uuid()}
-          organizationId={faker.string.uuid()}
-        />
+        <ContractActionsBar organizationId={faker.string.uuid()} />
       </Wrapper>,
     );
 
@@ -141,15 +156,25 @@ describe('TeacherDashboardContractsLayout/ContractActionsBar', () => {
     ).not.toBeInTheDocument();
   });
 
-  it('should return nothing when no actions are available', () => {
-    mockHasContractToDownload = false;
+  it.each([
+    {
+      label: 'only download is available but we have a courseProductRelationId',
+      hasContractToDownload: true,
+      courseProductRelationId: faker.string.uuid(),
+    },
+    {
+      label: 'no actions are available',
+      hasContractToDownload: false,
+    },
+  ])('should return nothing when $label', ({ hasContractToDownload, courseProductRelationId }) => {
+    mockHasContractToDownload = hasContractToDownload;
     mockCanSignContracts = false;
     mockContractsToSignCount = 0;
 
     render(
       <Wrapper>
         <ContractActionsBar
-          courseProductRelationId={faker.string.uuid()}
+          courseProductRelationId={courseProductRelationId}
           organizationId={faker.string.uuid()}
         />
       </Wrapper>,

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

@@ -15,9 +15,10 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
     organizationId,
     courseProductRelationId,
   });
-  const hasContractToDownload = useHasContractToDownload(organizationId);
+  const hasContractToDownload = useHasContractToDownload(organizationId, courseProductRelationId);
 
-  const nbAvailableActions = [canSignContracts, hasContractToDownload].filter((val) => val).length;
+  const canDownloadContracts = hasContractToDownload && !courseProductRelationId;
+  const nbAvailableActions = [canSignContracts, canDownloadContracts].filter((val) => val).length;
   return (
     nbAvailableActions > 0 && (
       <div
@@ -35,7 +36,7 @@ const ContractActionsBar = ({ organizationId, courseProductRelationId }: Contrac
             />
           </div>
         )}
-        {hasContractToDownload && <BulkDownloadContractButton organizationId={organizationId} />}
+        {canDownloadContracts && <BulkDownloadContractButton organizationId={organizationId} />}
       </div>
     )
   );

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

@@ -0,0 +1,134 @@
+import { QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { renderHook, waitFor } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { Organization } from 'types/Joanie';
+import useDefaultOrganizationId from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+interface WrapperProps {
+  routePath: string;
+  initialEntry: string;
+}
+
+describe('useDefaultOrganizationId', () => {
+  const organizations: {
+    routeOrganization: Organization;
+    queryOrganization: Organization;
+    userOrganizationList: Organization[];
+  } = {
+    routeOrganization: OrganizationFactory().one(),
+    queryOrganization: OrganizationFactory().one(),
+    userOrganizationList: OrganizationFactory().many(2),
+  };
+
+  const Wrapper = ({ children, routePath, initialEntry }: PropsWithChildren<WrapperProps>) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieSessionProvider>
+            <MemoryRouter initialEntries={[initialEntry]}>
+              <Routes>
+                <Route path={routePath} element={children} />
+              </Routes>
+            </MemoryRouter>
+          </JoanieSessionProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+
+  beforeEach(() => {
+    // Joanie provider's calls
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it.each([
+    {
+      testLabel: 'route organization before query',
+      routeOrganization: organizations.routeOrganization,
+      queryOrganization: organizations.queryOrganization,
+      userOrganizationList: organizations.userOrganizationList,
+      expectedOrganizationId: organizations.routeOrganization.id,
+    },
+    {
+      testLabel: 'query organization before first element of list',
+      routeOrganization: undefined,
+      queryOrganization: organizations.queryOrganization,
+      userOrganizationList: organizations.userOrganizationList,
+      expectedOrganizationId: organizations.queryOrganization.id,
+    },
+    {
+      testLabel: 'first element of list when nothing else is found',
+      routeOrganization: undefined,
+      queryOrganization: undefined,
+      userOrganizationList: organizations.userOrganizationList,
+      expectedOrganizationId: organizations.userOrganizationList[0].id,
+    },
+    {
+      testLabel: 'undefined when user have no organization in his list',
+      routeOrganization: undefined,
+      queryOrganization: undefined,
+      userOrganizationList: [],
+      expectedOrganizationId: undefined,
+    },
+  ])(
+    'should return $testLabel',
+    async ({
+      routeOrganization,
+      queryOrganization,
+      userOrganizationList,
+      expectedOrganizationId,
+    }) => {
+      let routePath = '/';
+      if (routeOrganization) {
+        routePath += ':organizationId/';
+      }
+      let initialEntry = '/';
+      if (routeOrganization) {
+        initialEntry += `${routeOrganization.id}/`;
+      }
+      if (queryOrganization) {
+        initialEntry += `?organization_id=${queryOrganization.id}`;
+      }
+
+      fetchMock.get(
+        'https://joanie.test/api/v1.0/organizations/',
+        [...userOrganizationList, routeOrganization, queryOrganization].filter(
+          (organization) => organization !== undefined,
+        ),
+      );
+      const { result } = renderHook(useDefaultOrganizationId, {
+        wrapper: ({ children }) => (
+          <Wrapper routePath={routePath} initialEntry={initialEntry}>
+            {children}
+          </Wrapper>
+        ),
+      });
+
+      // when looking in organization list defaultOrganization will be updated when organizations are fetched.
+      await waitFor(() => {
+        expect(result.current).toBe(expectedOrganizationId);
+      });
+    },
+  );
+});

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

@@ -0,0 +1,28 @@
+import { useParams, useSearchParams } from 'react-router-dom';
+import { useOrganizations } from 'hooks/useOrganizations';
+import { Organization } from 'types/Joanie';
+
+/**
+ * return organization id with this priority:
+ * * route param
+ * * query param
+ * * first organization of user's organizations
+ */
+const useDefaultOrganizationId = () => {
+  const { organizationId: routeOrganizationId } = useParams<{
+    organizationId?: Organization['id'];
+  }>();
+  const [searchParams] = useSearchParams();
+  const queryOrganizationId = searchParams.get('organization_id') || undefined;
+  const { items: organizations } = useOrganizations(undefined, {
+    enabled: !routeOrganizationId && !queryOrganizationId,
+  });
+
+  return (
+    routeOrganizationId ||
+    queryOrganizationId ||
+    (organizations.length > 0 ? organizations[0].id : undefined)
+  );
+};
+
+export default useDefaultOrganizationId;

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

@@ -1,13 +1,17 @@
 import { useOrganizationContracts } from 'hooks/useContracts';
 import { PER_PAGE } from 'settings';
-import { ContractState, Organization } from 'types/Joanie';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
 
-const useHasContractToDownload = (organizationId: Organization['id']) => {
+const useHasContractToDownload = (
+  organizationId: Organization['id'],
+  courseProductRelationId?: CourseProductRelation['id'],
+) => {
   const {
     items: contracts,
     states: { isFetched },
   } = useOrganizationContracts({
     organization_id: organizationId,
+    course_product_relation_id: courseProductRelationId,
     signature_state: ContractState.SIGNED,
     page: 1,
     page_size: PER_PAGE.teacherContractList,

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

@@ -0,0 +1,193 @@
+import fetchMock from 'fetch-mock';
+import { PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { CourseProductRelationFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { ContractState } from 'types/Joanie';
+import useTeacherContractFilters from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+interface WrapperProps {
+  routePath: string;
+  initialEntry: string;
+}
+
+describe('useTeacherContractFilters', () => {
+  const Wrapper = ({ children, routePath, initialEntry }: PropsWithChildren<WrapperProps>) => {
+    return (
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <JoanieSessionProvider>
+            <MemoryRouter initialEntries={[initialEntry]}>
+              <Routes>
+                <Route path={routePath} element={children} />
+              </Routes>
+            </MemoryRouter>
+          </JoanieSessionProvider>
+        </QueryClientProvider>
+      </IntlProvider>
+    );
+  };
+  beforeEach(() => {
+    // Joanie provider's calls
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should return default filter when called in a route without parameters', async () => {
+    const defaultOrganization = OrganizationFactory({ id: 'default' }).one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [defaultOrganization]);
+    const { result } = renderHook(useTeacherContractFilters, {
+      wrapper: ({ children }) => (
+        <Wrapper routePath="/" initialEntry="/">
+          {children}
+        </Wrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        contract_ids: [],
+        organization_id: defaultOrganization.id,
+        course_product_relation_id: undefined,
+        signature_state: ContractState.SIGNED,
+      });
+      expect(result.current.filters).toStrictEqual({
+        contract_ids: [],
+        organization_id: defaultOrganization.id,
+        course_product_relation_id: undefined,
+        signature_state: ContractState.SIGNED,
+      });
+    });
+  });
+
+  it('should use route parameters values when given', async () => {
+    const defaultOrganization = OrganizationFactory({ id: 'default' }).one();
+    const filteredOrganization = OrganizationFactory({ id: 'filtered' }).one();
+    const routeOrganization = OrganizationFactory({ id: 'route' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory().one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [
+      defaultOrganization,
+      filteredOrganization,
+    ]);
+    const { result } = renderHook(useTeacherContractFilters, {
+      wrapper: ({ children }) => (
+        <Wrapper
+          routePath="/:organizationId/:courseProductRelationId"
+          initialEntry={`/${routeOrganization.id}/${routeCourseProductRelation.id}?organization_id=${filteredOrganization.id}&signature_state=${ContractState?.UNSIGNED}&contract_ids=1&contract_ids=2`}
+        >
+          {children}
+        </Wrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        contract_ids: ['1', '2'],
+        organization_id: routeOrganization.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+        signature_state: ContractState.UNSIGNED,
+      });
+      expect(result.current.filters).toStrictEqual({
+        contract_ids: ['1', '2'],
+        organization_id: routeOrganization.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+        signature_state: ContractState.UNSIGNED,
+      });
+    });
+  });
+
+  it("should use organizationId from query parameters when it's not in route params", async () => {
+    const defaultOrganization = OrganizationFactory({ id: 'default' }).one();
+    const filteredOrganization = OrganizationFactory({ id: 'filtered' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory({ id: 'route' }).one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [
+      defaultOrganization,
+      filteredOrganization,
+    ]);
+    const { result } = renderHook(useTeacherContractFilters, {
+      wrapper: ({ children }) => (
+        <Wrapper
+          routePath="/:courseProductRelationId"
+          initialEntry={`/${routeCourseProductRelation.id}/?organization_id=${filteredOrganization.id}&signature_state=${ContractState?.UNSIGNED}&contract_ids=1&contract_ids=2`}
+        >
+          {children}
+        </Wrapper>
+      ),
+    });
+
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual({
+        contract_ids: ['1', '2'],
+        organization_id: filteredOrganization.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+        signature_state: ContractState.UNSIGNED,
+      });
+      expect(result.current.filters).toStrictEqual({
+        contract_ids: ['1', '2'],
+        organization_id: filteredOrganization.id,
+        course_product_relation_id: routeCourseProductRelation.id,
+        signature_state: ContractState.UNSIGNED,
+      });
+    });
+  });
+
+  it('setFilters should update filter state', async () => {
+    const defaultOrganization = OrganizationFactory({ id: 'default' }).one();
+    const routeOrganization = OrganizationFactory({ id: 'route' }).one();
+    const routeCourseProductRelation = CourseProductRelationFactory().one();
+    // fetching user's organizations to initialize default organizationId.
+    fetchMock.get('https://joanie.test/api/v1.0/organizations/', [defaultOrganization]);
+    const { result } = renderHook(useTeacherContractFilters, {
+      wrapper: ({ children }) => (
+        <Wrapper routePath="/" initialEntry="/">
+          {children}
+        </Wrapper>
+      ),
+    });
+
+    const expectedInitialFilters = {
+      contract_ids: [],
+      organization_id: defaultOrganization.id,
+      course_product_relation_id: undefined,
+      signature_state: ContractState.SIGNED,
+    };
+    await waitFor(() => {
+      expect(result.current.initialFilters).toStrictEqual(expectedInitialFilters);
+    });
+
+    const newFilters = {
+      contract_ids: ['1', '2'],
+      organization_id: routeOrganization.id,
+      course_product_relation_id: routeCourseProductRelation.id,
+      signature_state: ContractState.UNSIGNED,
+    };
+    act(() => {
+      result.current.setFilters(newFilters);
+    });
+
+    expect(result.current.filters).toStrictEqual(newFilters);
+    expect(result.current.initialFilters).toStrictEqual(expectedInitialFilters);
+  });
+});

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

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
+import useDefaultOrganizationId from '../useDefaultOrganizationId';
+
+export type TeacherDashboardContractsParams = {
+  organizationId?: string;
+  courseProductRelationId?: string;
+};
+
+const useTeacherContractFilters = () => {
+  const { courseProductRelationId } = useParams<TeacherDashboardContractsParams>();
+  const [searchParams] = useSearchParams();
+  const searchFilters: ContractResourceQuery = useMemo(() => {
+    return {
+      organization_id: searchParams.get('organization_id') || undefined,
+      course_product_relation_id: searchParams.get('course_product_relation_id') || undefined,
+      contract_ids: searchParams.getAll('contract_ids') || undefined,
+      signature_state:
+        (searchParams.get('signature_state') as ContractState) || ContractState.SIGNED,
+    };
+  }, Array.from(searchParams.entries()));
+
+  // default orgnizationId between (ordered by priority): route, query, first user's organization.
+  const defaultOrganizationId = useDefaultOrganizationId();
+
+  const initialFilters = useMemo(() => {
+    return {
+      ...searchFilters,
+      organization_id: defaultOrganizationId,
+      course_product_relation_id: courseProductRelationId,
+    };
+  }, [defaultOrganizationId]);
+  const [filters, setFilters] = useState<ContractResourceQuery>(initialFilters);
+
+  // update current filter with initial value when it's ready
+  useEffect(() => {
+    setFilters(initialFilters);
+  }, [initialFilters]);
+
+  return { initialFilters, filters, setFilters };
+};
+
+export default useTeacherContractFilters;

package/js/types/commonDataProps.ts

@@ -31,6 +31,9 @@ export interface RichieContext {
   release: string;
   sentry_dsn: Nullable<string>;
   web_analytics_providers?: Nullable<string[]>;
+  site_urls: {
+    terms_and_conditions: Nullable<string>;
+  };
 }
 
 export interface CommonDataProps {

package/js/utils/search/getSuggestionsSection/index.spec.ts

@@ -78,7 +78,7 @@ describe('utils/search/getSuggestionsSection', () => {
     expect(mockHandle).toHaveBeenCalledWith(
       new Error(
         'Failed to decode JSON in getSuggestionSection FetchError: invalid json response body at ' +
-          '/api/v1.0/courses/autocomplete/?query=some%20search reason: Unexpected token o in JSON at position 1',
+          '/api/v1.0/courses/autocomplete/?query=some%20search reason: Unexpected token \'o\', "not json" is not valid JSON',
       ),
     );
   });

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

@@ -181,6 +181,9 @@ export const RichieContextFactory = factory<CommonDataProps['context']>(() => ({
   release: faker.system.semver(),
   sentry_dsn: null,
   web_analytics_providers: null,
+  site_urls: {
+    terms_and_conditions: null,
+  },
 }));
 
 export const CourseLightFactory = factory<Course>(() => {

package/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.spec.tsx

@@ -1,11 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { PropsWithChildren } from 'react';
-import { EnrollmentFactory } from 'utils/test/factories/joanie';
+import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
-import { Enrollment } from 'types/Joanie';
-import { DATETIME_FORMAT } from 'hooks/useDateFormat';
-import { Enrolled } from './DashboardItemCourseEnrolling';
+import { CourseRun, Enrollment } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+import { noop } from 'utils';
+import { computeState } from 'utils/CourseRuns';
+import { DashboardItemCourseEnrollingRun, Enrolled } from './DashboardItemCourseEnrolling';
 
 /**
  * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
@@ -16,49 +19,109 @@ describe('<Enrolled/>', () => {
     return <IntlProvider locale="en">{children}</IntlProvider>;
   };
 
-  const runTest = async (priority: Priority, expectButton: boolean) => {
-    const enrollment: Enrollment = EnrollmentFactory().one();
-    enrollment.course_run.state.priority = priority;
-    render(<Enrolled enrollment={enrollment} />, { wrapper });
-    await screen.findByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(new Date(enrollment.course_run.end)),
-    );
-    if (expectButton) {
-      const link = screen.getByRole('link', { name: 'Access course' });
-      expect(link).toBeEnabled();
-      expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
-    } else {
-      expect(screen.queryByRole('link', { name: 'Access course' })).toBeNull();
-    }
-  };
+  it.each([
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_OPEN,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_OPEN,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_OPEN,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_NOT_YET_OPEN,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_CLOSED,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_CLOSED,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_CLOSED,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.TO_BE_SCHEDULED,
+      expectButton: false,
+    },
+  ])(
+    'handles enrollments with priority=$priority $buttonTestLabel',
+    async ({ priority, expectButton }) => {
+      const enrollment: Enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state.priority = priority;
+      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      await screen.findByText(
+        'You are enrolled for the session from ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(enrollment.course_run.start),
+          ) +
+          ' to ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(enrollment.course_run.end),
+          ),
+      );
+      if (expectButton) {
+        const link = screen.getByRole('link', { name: 'Access to course' });
+        expect(link).toBeEnabled();
+        expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
+      } else {
+        expect(screen.queryByRole('link', { name: 'Access to course' })).toBeNull();
+      }
+    },
+  );
+});
+
+describe('<DashboardItemCourseEnrollingRun/>', () => {
+  it.each([
+    [Priority.ONGOING_OPEN, false],
+    [Priority.FUTURE_OPEN, false],
+    [Priority.ARCHIVED_OPEN, false],
+    [Priority.FUTURE_NOT_YET_OPEN, true],
+    [Priority.FUTURE_CLOSED, false],
+    [Priority.ONGOING_CLOSED, false],
+    [Priority.ARCHIVED_CLOSED, false],
+    [Priority.TO_BE_SCHEDULED, false],
+  ])(
+    `handles correctly enrollment_start date displaying with priority=%s`,
+    async (priority, expectEnrollmentNotYetOpened) => {
+      const order = CredentialOrderFactory().one();
+      const courseRun = CourseRunFactoryFromPriority(priority)().one();
+      courseRun.state = computeState(courseRun);
+      const joanieCourseRun = courseRun as unknown as CourseRun;
+      joanieCourseRun.course = order.course;
+
+      render(
+        <IntlProvider locale="en">
+          <DashboardItemCourseEnrollingRun
+            order={order}
+            courseRun={joanieCourseRun}
+            selected={false}
+            enroll={noop}
+          />
+        </IntlProvider>,
+      );
 
-  it('handles enrollments with priority=ONGOING_OPEN', () => {
-    runTest(Priority.ONGOING_OPEN, true);
-  });
-  it('handles enrollments with priority=FUTURE_OPEN', () => {
-    runTest(Priority.FUTURE_OPEN, false);
-  });
-  it('handles enrollments with priority=ARCHIVED_OPEN', () => {
-    runTest(Priority.ARCHIVED_OPEN, true);
-  });
-  it('handles enrollments with priority=FUTURE_NOT_YET_OPEN', () => {
-    runTest(Priority.FUTURE_NOT_YET_OPEN, false);
-  });
-  it('handles enrollments with priority=FUTURE_CLOSED', () => {
-    runTest(Priority.FUTURE_CLOSED, false);
-  });
-  it('handles enrollments with priority=ONGOING_CLOSED', () => {
-    runTest(Priority.ONGOING_CLOSED, true);
-  });
-  it('handles enrollments with priority=ARCHIVED_CLOSED', () => {
-    runTest(Priority.ARCHIVED_CLOSED, true);
-  });
-  it('handles enrollments with priority=TO_BE_SCHEDULED', () => {
-    runTest(Priority.TO_BE_SCHEDULED, false);
-  });
+      if (expectEnrollmentNotYetOpened) {
+        screen.getByText(/Enrollment will open on/);
+      } else {
+        expect(screen.queryByText(/Enrollment will open on/)).not.toBeInTheDocument();
+      }
+    },
+  );
 });

package/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.tsx

@@ -1,15 +1,15 @@
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { Button } from '@openfun/cunningham-react';
 import { CoursesHelper } from 'utils/CoursesHelper';
 import { Priority } from 'types';
 import {
+  AbstractCourse,
+  CertificateOrder,
   CourseRun,
-  Enrollment,
   CredentialOrder,
-  AbstractCourse,
+  Enrollment,
   Product,
-  CertificateOrder,
 } from 'types/Joanie';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
@@ -208,7 +208,7 @@ interface DashboardItemCourseEnrollingRunProps {
   product?: Product;
 }
 
-const DashboardItemCourseEnrollingRun = ({
+export const DashboardItemCourseEnrollingRun = ({
   courseRun,
   selected,
   enroll,
@@ -247,7 +247,7 @@ const DashboardItemCourseEnrollingRun = ({
             }}
           />
         </div>
-        {!isOpenedForEnrollment && (
+        {courseRun.state.priority === Priority.FUTURE_NOT_YET_OPEN && (
           <div className="dashboard-item__course-enrolling__run__not-opened">
             <FormattedMessage
               {...messages.enrollmentNotYetOpened}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev49",
+  "version": "2.25.0-b2.dev62",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -147,6 +147,6 @@
     "workerDirectory": "../richie/static/richie/js"
   },
   "volta": {
-    "node": "18.19.0"
+    "node": "20.11.0"
   }
 }

package/scss/objects/_organization_glimpses.scss

@@ -131,18 +131,12 @@
   }
 
   &__logo {
-    position: relative;
+    height: 100%;
     width: 100%;
-    padding-bottom: 56.25%; // Aspect ratio 16/9
 
     & > img {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      width: 100%;
       height: 100%;
+      width: 100%;
       object-fit: contain;
       object-position: center;
     }

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

@@ -1,28 +0,0 @@
-import { useMemo, useState } from 'react';
-import { useParams, useSearchParams } from 'react-router-dom';
-import { ContractResourceQuery, ContractState } from 'types/Joanie';
-
-export type TeacherDashboardContractsParams = {
-  organizationId?: string;
-  courseProductRelationId?: string;
-};
-
-const useTeacherContractFilters = () => {
-  const { organizationId, courseProductRelationId } = useParams<TeacherDashboardContractsParams>();
-  const [searchParams] = useSearchParams();
-
-  const initialFilters = useMemo(
-    () => ({
-      signature_state:
-        (searchParams.get('signature_state') as ContractState) || ContractState.SIGNED,
-      organization_id: organizationId,
-      course_product_relation_id: courseProductRelationId,
-    }),
-    [],
-  );
-  const [filters, setFilters] = useState<ContractResourceQuery>(initialFilters);
-
-  return { initialFilters, filters, setFilters };
-};
-
-export default useTeacherContractFilters;