richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/contexts/SessionContext/JoanieSessionProvider.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { useAddresses } from 'hooks/useAddresses';
-import { useOrders } from 'hooks/useOrders';
+import { useOmniscientOrders } from 'hooks/useOrders';
 import { REACT_QUERY_SETTINGS, RICHIE_USER_TOKEN } from 'settings';
 import type { User } from 'types/User';
 import type { Nullable } from 'types/utils';
@@ -26,7 +26,7 @@ import { Session } from './SessionContext';
  * @return {Function} Session.register - redirect to the register page
  * @return {Function} Session.destroy - set Session to undefined then make a request to logout user to the authentication service
  */
-const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
+const JoanieSessionProvider = ({ children }: React.PropsWithChildren<{}>) => {
   /**
    * `user` is:
    * - `undefined` when we have not made the `whoami` request yet;
@@ -36,28 +36,30 @@ const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
   const [refetchInterval, setRefetchInterval] = useState<false | number>(false);
   const {
     data: user,
+    isPending,
     isStale,
-    isLoading: isLoadingUser,
-  } = useQuery<Nullable<User>>(['user'], AuthenticationApi!.me, {
+  } = useQuery<Nullable<User>>({
+    queryKey: ['user'],
+    queryFn: async () => {
+      const userRes = await AuthenticationApi!.me();
+      /**
+       * It is on purpose that this side effect is done synchronously and not in a useEffect.
+       * If we had wrapped it inside a useEffect it would cause race conditions where useSession
+       * queries would turn enabled == true before the side effect is done and then try to use
+       * the sessionStorage RICHIE_USER_TOKEN before it is set in fetchWithJWT. Thus causing 401 errors.
+       */
+      sessionStorage.setItem(RICHIE_USER_TOKEN, userRes?.access_token!);
+      return userRes;
+    },
     refetchOnWindowFocus: true,
     refetchInterval,
     staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
-    onError: () => {
-      sessionStorage.removeItem(RICHIE_USER_TOKEN);
-    },
-    onSuccess: (data) => {
-      sessionStorage.removeItem(RICHIE_USER_TOKEN);
-      if (data) {
-        sessionStorage.setItem(RICHIE_USER_TOKEN, data.access_token!);
-      }
-    },
   });
   const previousUserState = usePrevious(user);
-
   const queryClient = useQueryClient();
   const addresses = useAddresses();
   const creditCards = useCreditCards();
-  const orders = useOrders();
+  const orders = useOmniscientOrders();
 
   const login = useCallback(() => {
     queryClient.clear();
@@ -73,29 +75,26 @@ const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
     AuthenticationApi!.register();
   }, [queryClient]);
 
-  const invalidate = useCallback(() => {
-    /*
-      Invalidate all queries except 'user' as we can set it to null manually
-      after logout to avoid extra requests
-    */
+  const destroy = useCallback(async () => {
+    await AuthenticationApi!.logout();
+    sessionStorage.removeItem(REACT_QUERY_SETTINGS.cacheStorage.key);
     sessionStorage.removeItem(RICHIE_USER_TOKEN);
     queryClient.removeQueries({
       predicate: (query: any) =>
         query.options.queryKey.includes('user') && query.options.queryKey.length > 1,
     });
     queryClient.setQueryData(['user'], null);
-  }, [queryClient]);
-
-  const destroy = useCallback(async () => {
-    AuthenticationApi!.logout();
-    invalidate();
-  }, [invalidate]);
+  }, []);
 
   useEffect(() => {
-    if (user && !isStale) {
-      addresses.methods.prefetch();
-      creditCards.methods.prefetch();
-      orders.methods.prefetch();
+    if (user) {
+      if (!isStale) {
+        addresses.methods.prefetch();
+        creditCards.methods.prefetch();
+        orders.methods.prefetch();
+      }
+    } else {
+      sessionStorage.removeItem(RICHIE_USER_TOKEN);
     }
 
     if (!isTestEnv) {
@@ -112,12 +111,12 @@ const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
   const context = useMemo(
     () => ({
       user,
-      isLoadingUser,
+      isPending,
       destroy,
       login,
       register,
     }),
-    [user, isLoadingUser, destroy, login, register],
+    [user, isPending, destroy, login, register],
   );
 
   useEffect(() => {
@@ -133,8 +132,8 @@ const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
   return <Session.Provider value={context}>{children}</Session.Provider>;
 };
 
-export default ({ children, ...props }: React.PropsWithChildren<any>) => (
+export default ({ children }: React.PropsWithChildren<{}>) => (
   <JoanieApiProvider>
-    <JoanieSessionProvider {...props}>{children}</JoanieSessionProvider>
+    <JoanieSessionProvider>{children}</JoanieSessionProvider>
   </JoanieApiProvider>
 );

package/js/contexts/SessionContext/index.spec.tsx

@@ -11,6 +11,7 @@ import { Deferred } from 'utils/test/deferred';
 import { REACT_QUERY_SETTINGS } from 'settings';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import BaseSessionProvider from './BaseSessionProvider';
 import { useSession } from '.';
 
@@ -103,7 +104,7 @@ describe('SessionProvider', () => {
       });
 
       await act(async () => {
-        userDeferred.resolve(401);
+        userDeferred.resolve(HttpStatusCode.UNAUTHORIZED);
       });
 
       await waitFor(() => {
@@ -148,7 +149,7 @@ describe('SessionProvider', () => {
       const userDeferred = new Deferred();
 
       fetchMock.get('https://endpoint.test/api/user/v1/me', userDeferred.promise);
-      fetchMock.get('https://endpoint.test/logout', 200);
+      fetchMock.get('https://endpoint.test/logout', HttpStatusCode.OK);
       const { result } = renderHook(useSession, { wrapper: wrapper() });
 
       await act(async () => {
@@ -168,15 +169,13 @@ describe('SessionProvider', () => {
         jest.runOnlyPendingTimers();
       });
 
-      expect(result.current.user).toBeNull();
-      expect(sessionStorage.getItem(REACT_QUERY_SETTINGS.cacheStorage.key)).toMatch(
-        /"data":null,.*"queryKey":\["user"]/,
-      );
+      await waitFor(() => expect(result.current.user).toBeNull());
+      expect(sessionStorage.getItem(REACT_QUERY_SETTINGS.cacheStorage.key)).toBeNull();
     });
 
     it('does not make request if there is a valid session in cache', async () => {
       const user: User = UserFactory().one();
-      fetchMock.get('https://endpoint.test/api/user/v1/me', 200);
+      fetchMock.get('https://endpoint.test/api/user/v1/me', HttpStatusCode.OK);
 
       const { result } = renderHook(useSession, {
         wrapper: wrapper(createTestQueryClient({ user })),

package/js/hooks/useBreadcrumbsPlaceholders.tsx

@@ -9,5 +9,5 @@ export const useBreadcrumbsPlaceholders = (data: DashboardBreadcrumbsPlaceholder
   const context = useContext(DashboardBreadcrumbsContext);
   useEffect(() => {
     context.pushBreadcrumbsPlaceholders(data);
-  }, [data]);
+  }, [JSON.stringify(data)]);
 };

package/js/hooks/useContractAbilities/index.spec.ts

@@ -0,0 +1,27 @@
+import { renderHook } from '@testing-library/react';
+import useContractAbilities from 'hooks/useContractAbilities/index';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+
+describe('useContractAbilities', () => {
+  it.each([
+    [[], false],
+    [ContractFactory({ abilities: { [ContractActions.SIGN]: true } }).one(), true],
+    [ContractFactory({ abilities: { [ContractActions.SIGN]: false } }).one(), false],
+    [ContractFactory({ abilities: { [ContractActions.SIGN]: true } }).many(2), true],
+    [
+      [
+        ContractFactory({ abilities: { [ContractActions.SIGN]: true } }).one(),
+        ContractFactory({ abilities: { [ContractActions.SIGN]: false } }).one(),
+      ],
+      false,
+    ],
+  ])('should return ability interface to check contract abilities', (contracts, is_allowed) => {
+    const { result } = renderHook(() => useContractAbilities(contracts));
+
+    expect(result.current.can).toBeDefined();
+    expect(result.current.cannot).toBeDefined();
+
+    expect(result.current.can(ContractActions.SIGN)).toBe(is_allowed);
+  });
+});

package/js/hooks/useContractAbilities/index.ts

@@ -0,0 +1,8 @@
+import { Contract } from 'types/Joanie';
+import AbilitiesHelper from 'utils/AbilitiesHelper';
+
+const useContractAbilities = (contracts: Contract | Contract[]) => {
+  return AbilitiesHelper.buildEntityInterface(contracts);
+};
+
+export default useContractAbilities;

package/js/hooks/useContractArchive/index.download.spec.tsx

@@ -0,0 +1,126 @@
+import fetchMock from 'fetch-mock';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import { fireEvent, renderHook, waitFor } from '@testing-library/react';
+import { faker } from '@faker-js/faker';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { handle } from 'utils/errors/handle';
+import { SessionProvider } from 'contexts/SessionContext';
+import { Deferred } from 'utils/test/deferred';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import useContractArchive from '.';
+
+jest.mock('utils/errors/handle');
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+const mockHandle = handle as jest.MockedFn<typeof handle>;
+
+describe('useContractArchive', () => {
+  beforeEach(() => {
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+  });
+
+  beforeAll(() => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn();
+    // eslint-disable-next-line compat/compat
+    URL.revokeObjectURL = jest.fn();
+    HTMLAnchorElement.prototype.click = jest.fn();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>{children}</SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  it('downloads the certificate', async () => {
+    const archiveId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/contracts/zip-archive/${archiveId}/`;
+    const deferred = new Deferred();
+    fetchMock.get(DOWNLOAD_URL, deferred.promise);
+
+    const { result } = renderHook(() => useContractArchive(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+
+    result.current.methods.get(archiveId);
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['test']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="test.pdf";',
+        'Content-Type': 'application/pdf',
+      },
+    });
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+    });
+
+    // - A event listener should have attached to window to know when window is blurred.
+    // This event is triggered in browser when the download pop up is displayed.
+    fireEvent.blur(window);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles an error if certificate download request fails', async () => {
+    const archiveId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/contracts/zip-archive/${archiveId}/`;
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
+
+    const { result } = renderHook(() => useContractArchive(), {
+      wrapper: Wrapper,
+    });
+    await waitFor(() => expect(result.current).not.toBeNull());
+
+    expect(fetchMock.called(DOWNLOAD_URL)).toBe(false);
+    expect(mockHandle).not.toHaveBeenCalled();
+    // eslint-disable-next-line compat/compat
+    expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+
+    await result.current.methods.get(archiveId);
+
+    await waitFor(() => {
+      expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);
+      expect(mockHandle).toHaveBeenNthCalledWith(1, new Error('Unauthorized'));
+      // eslint-disable-next-line compat/compat
+      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
+      // eslint-disable-next-line compat/compat
+      expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
+    });
+  });
+});

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

@@ -0,0 +1,91 @@
+import { faker } from '@faker-js/faker';
+import fetchMock from 'fetch-mock';
+import { renderHook } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import useContractArchive from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe('useContractArchive', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <IntlProvider locale="en">
+        <JoanieApiProvider>{children}</JoanieApiProvider>
+      </IntlProvider>
+    );
+  };
+  afterEach(() => {
+    fetchMock.restore();
+  });
+  it.each([
+    {
+      label: `response code: ${HttpStatusCode.NO_CONTENT}`,
+      statusCode: HttpStatusCode.NO_CONTENT,
+      expectedValue: true,
+    },
+    {
+      label: `response code: ${HttpStatusCode.NOT_FOUND}`,
+      statusCode: HttpStatusCode.NOT_FOUND,
+      expectedValue: false,
+    },
+    {
+      label: `response code: ${HttpStatusCode.FORBIDDEN}`,
+      statusCode: HttpStatusCode.FORBIDDEN,
+      expectedValue: false,
+    },
+    {
+      label: `response code: ${HttpStatusCode.INTERNAL_SERVER_ERROR}`,
+      statusCode: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      expectedValue: false,
+    },
+    {
+      label: `response code: ${HttpStatusCode.UNAUTHORIZED}`,
+      statusCode: HttpStatusCode.UNAUTHORIZED,
+      expectedValue: false,
+    },
+  ])(
+    'check method should return the right value for response code: $label',
+    async ({ statusCode, expectedValue }) => {
+      const contractArchiveId = faker.string.uuid();
+      fetchMock.mock(
+        (url, options) => {
+          return (
+            options.method === 'OPTIONS' &&
+            url === `https://joanie.test/api/v1.0/contracts/zip-archive/${contractArchiveId}/`
+          );
+        },
+        new Response('', { status: statusCode }),
+      );
+
+      const { result } = renderHook(useContractArchive, {
+        wrapper: Wrapper,
+      });
+      const response = await result.current.methods.check(contractArchiveId);
+      expect(response).toBe(expectedValue);
+    },
+  );
+
+  it('create should return a contractArchiveId', async () => {
+    const contractArchiveId = faker.string.uuid();
+    fetchMock.post('https://joanie.test/api/v1.0/contracts/zip-archive/', {
+      url: `http://test.url/uri/${contractArchiveId}/uri/?toto=tata`,
+    });
+    const { result } = renderHook(useContractArchive, {
+      wrapper: Wrapper,
+    });
+
+    const organizationId = faker.string.uuid();
+    const response = await result.current.methods.create(organizationId);
+    expect(response).toBe(contractArchiveId);
+  });
+});

package/js/hooks/useContractArchive/index.ts

@@ -0,0 +1,64 @@
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { handle } from 'utils/errors/handle';
+
+const extractArchiveId = (url: string): string => {
+  const uuidRegex = /[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{4}-[0-9A-Fa-f]{12}/;
+  const match = url.match(uuidRegex);
+
+  if (match === null) {
+    const error = new Error(
+      'Unable to extract `contractArchiveId` from `contract.zip_archive.create` response',
+    );
+    handle(error);
+    throw error;
+  }
+
+  return match[0];
+};
+
+const useContractArchive = () => {
+  const api = useJoanieApi();
+  return {
+    methods: {
+      check: async (archiveId: string): Promise<boolean> => {
+        const response = await api.user.contracts.zip_archive.check(archiveId);
+
+        if (response.ok) {
+          if (response.status === HttpStatusCode.NO_CONTENT) {
+            return true;
+          }
+          handle(
+            new Error(
+              `Unknown success code ${response.status} for OPTION request to contract's zip_archive endpoint.`,
+            ),
+          );
+        }
+
+        return false;
+      },
+      get: async (archiveId: string): Promise<true | void> => {
+        // FIXME: two thing could happen here with HttpStatusCode.NOT_FOUND response:
+        // * nothing found because the zip is generating.
+        // * nothing found because the zip doesn't and will never exist.
+        const success = await browserDownloadFromBlob(() =>
+          api.user.contracts.zip_archive.get(archiveId),
+        );
+
+        if (success) {
+          return true;
+        }
+      },
+      create: async (organizationId: string): Promise<string> => {
+        const response = await api.user.contracts.zip_archive.create({
+          organization_id: organizationId,
+        });
+
+        return extractArchiveId(response.url);
+      },
+    },
+  };
+};
+
+export default useContractArchive;

package/js/hooks/useContracts/index.tsx

@@ -0,0 +1,68 @@
+import { defineMessages } from 'react-intl';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { QueryOptions, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { API, Contract, ContractResourceQuery } from 'types/Joanie';
+
+const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useContracts.errorSelect',
+    description: 'Error message shown to the user when contracts fetch request fails.',
+    defaultMessage: 'An error occurred while fetching contracts. Please retry later.',
+  },
+  errorNotFound: {
+    id: 'hooks.useContracts.errorNotFound',
+    description: 'Error message shown to the user when no contract matches.',
+    defaultMessage: 'Cannot find the contract',
+  },
+});
+
+const props: UseResourcesProps<Contract, ContractResourceQuery, API['user']['contracts']> = {
+  queryKey: ['contracts'],
+  apiInterface: () => useJoanieApi().user.contracts,
+  session: true,
+  messages,
+};
+
+/**
+ * Joanie Api hook to retrieve/update a contract owned by the authenticated user.
+ */
+export const useUserContract = useResource(props);
+export const useUserContracts = useResources(props);
+
+/**
+ * Joanie Api hook to retrieve/update a contracts related to a course.
+ */
+const organizationProps: UseResourcesProps<
+  Contract,
+  ContractResourceQuery,
+  API['organizations']['contracts']
+> = {
+  ...props,
+  queryKey: ['organization_contracts'],
+  apiInterface: () => useJoanieApi().organizations.contracts,
+};
+
+export const useOrganizationContract = (
+  id: string,
+  filters: ContractResourceQuery,
+  queryOptions?: QueryOptions<Contract>,
+) => {
+  return useResource(organizationProps)(id, filters, {
+    ...queryOptions,
+    enabled:
+      !!id &&
+      !!filters?.organization_id &&
+      (queryOptions?.enabled === undefined || queryOptions.enabled),
+  });
+};
+
+export const useOrganizationContracts = (
+  filters: ContractResourceQuery,
+  queryOptions?: QueryOptions<Contract>,
+) => {
+  return useResources(organizationProps)(filters, {
+    ...queryOptions,
+    enabled:
+      !!filters?.organization_id && (queryOptions?.enabled === undefined || queryOptions.enabled),
+  });
+};

package/js/hooks/useCourseProductRelation/index.ts

@@ -1,7 +1,7 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { API, CourseProductRelation } from 'types/Joanie';
-import { ResourcesQuery, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
+import { API, CourseProductRelation, CourseProductRelationQueryFilters } from 'types/Joanie';
+import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
 
 const messages = defineMessages({
   errorGet: {
@@ -23,7 +23,7 @@ const messages = defineMessages({
  */
 const props: UseResourcesProps<
   CourseProductRelation,
-  ResourcesQuery,
+  CourseProductRelationQueryFilters,
   API['courseProductRelations']
 > = {
   queryKey: ['courseProductRelations'],
@@ -34,8 +34,11 @@ const props: UseResourcesProps<
 
 export const useCourseProductRelations = useResources<
   CourseProductRelation,
-  ResourcesQuery,
+  CourseProductRelationQueryFilters,
   API['courseProductRelations']
 >(props);
 
-export const useCourseProductRelation = useResource<CourseProductRelation>(props);
+export const useCourseProductRelation = useResource<
+  CourseProductRelation,
+  CourseProductRelationQueryFilters
+>(props);

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

@@ -78,7 +78,7 @@ describe('useCourseProductUnion', () => {
     const coursesUrl = ROUTES.courses.get.replace(':id/', '');
     const courseProductRelationsUrl = ROUTES.courseProductRelations.get.replace(':id/', '');
     fetchMock.get(
-      `${coursesUrl}?page=1&page_size=${PER_PAGE}`,
+      `${coursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
       mockPaginatedResponse(courseList.slice(0, PER_PAGE), 0, false),
     );
     fetchMock.get(
@@ -92,21 +92,23 @@ describe('useCourseProductUnion', () => {
     nbApiCalls += 1; // course product relations page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
-    expect(calledUrls).toContain(`${coursesUrl}?page=1&page_size=${PER_PAGE}`);
+    expect(calledUrls).toContain(
+      `${coursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
+    );
     expect(calledUrls).toContain(`${courseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`);
   });
 
   it('should call organization courses and organization coursesProductRelation endpoints', async () => {
     const organizationId = 'DUMMY_ORGANIZATION_ID';
     const ROUTES = getRoutes();
-    const organizationCoursesUrl = ROUTES.user.organizations.courses.get.replace(
-      ':id',
-      organizationId,
-    );
-    const organizationCourseProductRelationsUrl =
-      ROUTES.user.organizations.courseProductRelations.get.replace(':id', organizationId);
+    const organizationCoursesUrl = ROUTES.organizations.courses.get
+      .replace(':organization_id', organizationId)
+      .replace(':id/', '');
+    const organizationCourseProductRelationsUrl = ROUTES.organizations.courseProductRelations.get
+      .replace(':organization_id', organizationId)
+      .replace(':id/', '');
     fetchMock.get(
-      `${organizationCoursesUrl}?page=1&page_size=${PER_PAGE}`,
+      `${organizationCoursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
       mockPaginatedResponse(courseList.slice(0, PER_PAGE), 0, false),
     );
     fetchMock.get(
@@ -120,7 +122,9 @@ describe('useCourseProductUnion', () => {
     nbApiCalls += 1; // course product relations page 1
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
-    expect(calledUrls).toContain(`${organizationCoursesUrl}?page=1&page_size=${PER_PAGE}`);
+    expect(calledUrls).toContain(
+      `${organizationCoursesUrl}?has_listed_course_runs=true&page=1&page_size=${PER_PAGE}`,
+    );
     expect(calledUrls).toContain(
       `${organizationCourseProductRelationsUrl}?page=1&page_size=${PER_PAGE}`,
     );