richie-education 2.25.0-b2.dev46 → 2.25.0-b2.dev58

package/.nvmrc

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

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -53,6 +53,16 @@ const TeacherDashboardCourseList = ({
       {titleTranslated && (
         <h2 className="dashboard-course-list__title dashboard__page_title">{titleTranslated}</h2>
       )}
+      {courseAndProductList.length > 0 ? (
+        <CourseGlimpseList
+          courses={getCourseGlimpseListProps(courseAndProductList, intl, organizationId)}
+          context={context}
+          className="dashboard__course-glimpse-list"
+        />
+      ) : (
+        <FormattedMessage {...messages.emptyList} />
+      )}
+
       {isLoading && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">
@@ -60,28 +70,17 @@ const TeacherDashboardCourseList = ({
           </span>
         </Spinner>
       )}
-      {!isLoading &&
-        (courseAndProductList.length > 0 ? (
-          <>
-            <CourseGlimpseList
-              courses={getCourseGlimpseListProps(courseAndProductList, intl, organizationId)}
-              context={context}
-              className="dashboard__course-glimpse-list"
-            />
-            {hasMore && (
-              <Button
-                onClick={() => next()}
-                disabled={isLoading}
-                ref={loadMoreButtonRef}
-                color="tertiary"
-              >
-                <FormattedMessage {...messages.loadMore} />
-              </Button>
-            )}
-          </>
-        ) : (
-          <FormattedMessage {...messages.emptyList} />
-        ))}
+
+      {hasMore && (
+        <Button
+          onClick={() => next()}
+          disabled={isLoading}
+          ref={loadMoreButtonRef}
+          color="tertiary"
+        >
+          <FormattedMessage {...messages.loadMore} />
+        </Button>
+      )}
     </div>
   );
 };

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/Joanie.ts

@@ -1,4 +1,4 @@
-import type { CourseState } from 'types';
+import type { CourseState, OpenEdXEnrollment } from 'types';
 import type { Maybe, Nullable } from 'types/utils';
 import { Resource, ResourcesQuery } from 'hooks/useResources';
 import { OrderResourcesQuery } from 'hooks/useOrders';
@@ -190,8 +190,23 @@ export interface Enrollment {
   created_on: string;
   orders: OrderEnrollment[];
   product_relations: CourseProductRelation[];
-  certificate_id?: string;
-}
+  certificate_id: Nullable<string>;
+}
+export const isEnrollment = (obj: unknown | Enrollment | OpenEdXEnrollment): obj is Enrollment => {
+  if (!obj || typeof obj !== 'object') {
+    return false;
+  }
+  return (
+    'is_active' in obj &&
+    'state' in obj &&
+    'course_run' in obj &&
+    'was_created_by_order' in obj &&
+    'created_on' in obj &&
+    'orders' in obj &&
+    'product_relations' in obj &&
+    'certificate_id' in obj
+  );
+};
 
 export interface EnrollmentLight {
   id: string;

package/js/types/index.ts

@@ -69,4 +69,5 @@ export interface OpenEdXEnrollment {
  * Use an unknown type to make sure we do not depend on any LMS-specific fields
  * on enrollment objects, just use HTTP response codes.
  */
+// TODO(rlecellier): rename into UnknownEnrollment
 export type Enrollment = unknown;

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/joanie.ts

@@ -81,6 +81,7 @@ export const EnrollmentFactory = factory((): Enrollment => {
     was_created_by_order: false,
     created_on: faker.date.past({ years: 1 }).toISOString(),
     orders: [],
+    certificate_id: null,
   };
 });
 

package/js/widgets/Dashboard/components/DashboardItem/stories.mock.ts

@@ -26,4 +26,5 @@ export const enrollment: Enrollment = {
     languages: ['en'],
   },
   product_relations: [],
+  certificate_id: null,
 };

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.joanie.spec.tsx

@@ -3,7 +3,9 @@ import fetchMock from 'fetch-mock';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { IntlProvider } from 'react-intl';
 
+import { faker } from '@faker-js/faker';
 import { Deferred } from 'utils/test/deferred';
+import { EnrollmentFactory as JoanieEnrollment } from 'utils/test/factories/joanie';
 import {
   CourseRunFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -12,6 +14,7 @@ import {
 import { SessionProvider } from 'contexts/SessionContext';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { HttpStatusCode } from 'utils/errors/HttpError';
+import { Priority } from 'types';
 import CourseRunEnrollment from './index';
 
 jest.mock('utils/errors/handle');
@@ -96,10 +99,11 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
   it('shows an error message when enrollment get request failed', async () => {
     const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();
-    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${courseRun.id}`;
+    const joanieEnrollmentId = faker.string.uuid();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollmentId}`;
 
     fetchMock.get(
-      `${endpoint}/api/v1.0/enrollments/?course_run=${courseRun.id}`,
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollmentId}`,
       HttpStatusCode.INTERNAL_SERVER_ERROR,
     );
 
@@ -118,6 +122,45 @@ describe('<CourseRunEnrollment /> with joanie backend ', () => {
     await screen.findByText('Enrollment fetching failed');
   });
 
+  it('shows a link to the course if the user is already enrolled', async () => {
+    // Joanie session requests
+    let nbApiCalls = 3;
+    const user = UserFactory().one();
+    const joanieEnrollment = JoanieEnrollment({ is_active: true }).one();
+    const courseRun = CourseRunFactory().one();
+    courseRun.resource_link = `https://joanie.endpoint/api/v1.0/course-runs/${joanieEnrollment.course_run.id}/`;
+    courseRun.state.priority = Priority.ONGOING_OPEN;
+
+    fetchMock.get(
+      `${endpoint}/api/v1.0/enrollments/?course_run_id=${joanieEnrollment.course_run.id}`,
+      {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [joanieEnrollment],
+      },
+    );
+    nbApiCalls += 1;
+
+    await act(async () => {
+      render(
+        <QueryClientProvider client={createTestQueryClient({ user })}>
+          <IntlProvider locale="en">
+            <SessionProvider>
+              <CourseRunEnrollment courseRun={courseRun} />
+            </SessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>,
+      );
+    });
+
+    const $goToCourseButton = await screen.findByRole('link', { name: 'Go to course' });
+    expect($goToCourseButton).toBeInTheDocument();
+    expect($goToCourseButton).toHaveAttribute('href', joanieEnrollment.course_run.resource_link);
+    expect(screen.getByText('You are enrolled in this course run')).toBeInTheDocument();
+    expect(fetchMock.calls()).toHaveLength(nbApiCalls);
+  });
+
   it('shows an "Unenroll" text and allows the user to unenroll', async () => {
     const user = UserFactory().one();
     const courseRun = CourseRunFactory().one();

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useReducer } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 import c from 'classnames';
 import { Button } from '@openfun/cunningham-react';
@@ -12,6 +12,7 @@ import { HttpError } from 'utils/errors/HttpError';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment';
 import { CourseRunUnenrollButton } from 'widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/CourseRunUnenrollmentButton';
 import useDateRelative from 'hooks/useDateRelative';
+import { isEnrollment as isJoanieEnrollment } from 'types/Joanie';
 
 const messages = defineMessages({
   enroll: {
@@ -181,9 +182,8 @@ const reducer = ({ step, context }: ReducerState, action: ReducerAction): Reduce
 
 const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
   const { user, login } = useSession();
-  const { enrollmentIsActive, setEnrollment, canUnenroll, states } = useCourseEnrollment(
-    props.courseRun.resource_link,
-  );
+  const { enrollment, enrollmentIsActive, setEnrollment, canUnenroll, states } =
+    useCourseEnrollment(props.courseRun.resource_link);
   const startDate = new Date(props.courseRun.start);
   const isStarted = new Date() > startDate;
   const relativeStartDate = useDateRelative(startDate);
@@ -226,6 +226,16 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
     [courseRun, currentUser, dispatch, enrollmentIsActive],
   );
 
+  const LmsCourseLink = useMemo(() => {
+    if (states.isLoading) {
+      return null;
+    }
+    if (isJoanieEnrollment(enrollment)) {
+      return enrollment.course_run.resource_link;
+    }
+    return courseRun.resource_link;
+  }, [courseRun, enrollment]);
+
   useEffect(() => {
     dispatch({
       payload: { currentUser: user, isEnrolled: enrollmentIsActive },
@@ -303,7 +313,8 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
       return isStarted ? (
         <div>
           <Button
-            href={courseRun.resource_link}
+            href={LmsCourseLink === null ? '#' : LmsCourseLink}
+            disabled={LmsCourseLink === null}
             className="course-run-enrollment__cta"
             fullWidth={true}
           >

package/js/widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index.ts

@@ -21,22 +21,18 @@ const useCourseEnrollment = (resourceLink: string) => {
   const queryClient = useQueryClient();
   const EnrollmentAPI = EnrollmentApiInterface(resourceLink);
 
-  const [{ data: enrollment, isError, isLoading }, queryKey] = useSessionQuery(
+  const [{ data: enrollment, isError, isLoading: isEnrollmentLoading }, queryKey] = useSessionQuery(
     ['enrollment', resourceLink],
     async () => {
       return EnrollmentAPI.get(resourceLink, user!);
     },
   );
 
-  const [{ data: isActive, refetch: refetchIsActive }] = useSessionQuery(
-    [...queryKey, 'is_active'],
-    async () => EnrollmentAPI.isEnrolled(enrollment),
-    {
+  const [{ data: isActive, refetch: refetchIsActive, isLoading: isActiveLoading }] =
+    useSessionQuery([...queryKey, 'is_active'], async () => EnrollmentAPI.isEnrolled(enrollment), {
       // Enrollment is null if it has been fetched
-      enabled: !!user && enrollment !== undefined && !isLoading,
-    },
-  );
-
+      enabled: !!user && enrollment !== undefined && !isEnrollmentLoading,
+    });
   const { mutateAsync } = useSessionMutation({
     mutationFn: (activeEnrollment: boolean = true) =>
       EnrollmentAPI.set(resourceLink, user!, enrollment, activeEnrollment),
@@ -61,6 +57,7 @@ const useCourseEnrollment = (resourceLink: string) => {
       errors: {
         get: isError,
       },
+      isLoading: isEnrollmentLoading || isActiveLoading,
     },
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev46",
+  "version": "2.25.0-b2.dev58",
   "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;