richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/hooks/useCourseProductUnion/index.ts

@@ -6,6 +6,7 @@ import {
   CourseProductRelation,
   CourseQueryFilters,
   CourseProductRelationQueryFilters,
+  ProductType,
 } from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 
@@ -26,11 +27,13 @@ const messages = defineMessages({
 
 interface UseCourseProductUnionProps extends ResourceUnionPaginationProps {
   organizationId?: string;
+  productType?: ProductType;
 }
 
 export const useCourseProductUnion = ({
   perPage = 50,
   organizationId,
+  productType,
 }: UseCourseProductUnionProps = {}) => {
   const api = useJoanieApi();
   return useUnionResource<
@@ -42,14 +45,15 @@ export const useCourseProductUnion = ({
     queryAConfig: {
       queryKey: ['user', 'courses'],
       fn: api.courses.get,
-      filters: { organization_id: organizationId },
+      filters: { organization_id: organizationId, has_listed_course_runs: true },
     },
     queryBConfig: {
       queryKey: ['user', 'course_product_relations'],
       fn: api.courseProductRelations.get,
-      filters: { organization_id: organizationId },
+      filters: { organization_id: organizationId, product_type: productType },
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/hooks/useCourseProducts.ts

@@ -0,0 +1,45 @@
+import { defineMessages } from 'react-intl';
+import { API, CourseProductQueryFilters, CourseProductRelation, Product } from 'types/Joanie';
+import { QueryOptions, useResourcesCustom, UseResourcesProps } from 'hooks/useResources';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+
+export const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useCourseProducts.errorGet',
+    description: 'Error message shown to the user when product fetch request fails.',
+    defaultMessage: 'An error occurred while fetching product. Please retry later.',
+  },
+  errorNotFound: {
+    id: 'hooks.useCourseProducts.errorNotFound',
+    description: 'Error message shown to the user when no product matches.',
+    defaultMessage: 'Cannot find the product.',
+  },
+});
+
+/**
+ * Joanie Api hook to retrieve a product through its id and a course code.
+ */
+const props: UseResourcesProps<
+  CourseProductRelation,
+  CourseProductQueryFilters,
+  API['courses']['products']
+> = {
+  queryKey: ['courses-products'],
+  apiInterface: () => useJoanieApi().courses.products,
+  messages,
+};
+
+export const useCourseProduct = (
+  filters: Omit<CourseProductQueryFilters, 'id'> & { product_id: Product['id'] },
+  queryOptions?: QueryOptions<CourseProductRelation>,
+) => {
+  const { product_id: productId, ...queryfilters } = filters;
+  const enabled = !!productId && !!queryfilters.course_id;
+  const resources = useResourcesCustom<CourseProductRelation, CourseProductQueryFilters>({
+    ...props,
+    filters: { id: productId, ...queryfilters },
+    queryOptions: { ...queryOptions, enabled },
+  });
+  const { items, ...subRes } = resources;
+  return { ...subRes, item: items[0] };
+};

package/js/hooks/useCourseSearchParams/computeNewFilterValue.ts

@@ -46,9 +46,9 @@ export const computeNewFilterValue = (
         existingValue === update.payload
           ? [existingValue]
           : isMPTTParentOf(existingValue, update.payload) ||
-            isMPTTChildOf(existingValue, update.payload)
-          ? [update.payload]
-          : [existingValue, update.payload],
+              isMPTTChildOf(existingValue, update.payload)
+            ? [update.payload]
+            : [existingValue, update.payload],
       // REMOVE:
       // - Return nothing if we had to drop the existing value we had
       // - Keep the existing value if it's not the one we needed to drop

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

@@ -66,7 +66,7 @@ describe('hooks/useCourses', () => {
     expect(result.current.states.creating).toBeUndefined();
     expect(result.current.states.deleting).toBeUndefined();
     expect(result.current.states.updating).toBeUndefined();
-    expect(result.current.states.isLoading).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
     expect(result.current.states.error).toBeUndefined();
 
     const courses = CourseListItemFactory().many(3);
@@ -81,7 +81,7 @@ describe('hooks/useCourses', () => {
     expect(result.current.states.creating).toBeUndefined();
     expect(result.current.states.deleting).toBeUndefined();
     expect(result.current.states.updating).toBeUndefined();
-    expect(result.current.states.isLoading).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBeUndefined();
   });
 });

package/js/hooks/useCourses/index.ts

@@ -1,6 +1,6 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { API, CourseListItem, PaginatedResourceQuery } from 'types/Joanie';
+import { API, CourseListItem, CourseQueryFilters } from 'types/Joanie';
 import { useResource, useResources, UseResourcesProps } from 'hooks/useResources';
 
 const messages = defineMessages({
@@ -20,12 +20,12 @@ const messages = defineMessages({
  * Joanie Api hook to retrieve course
  * owned by the authenticated user.
  */
-const props: UseResourcesProps<CourseListItem, PaginatedResourceQuery, API['courses']> = {
+const props: UseResourcesProps<CourseListItem, CourseQueryFilters, API['courses']> = {
   queryKey: ['courses'],
   apiInterface: () => useJoanieApi().courses,
   session: true,
   messages,
 };
 
-export const useCourses = useResources(props);
-export const useCourse = useResource<CourseListItem>(props);
+export const useCourses = useResources<CourseListItem, CourseQueryFilters>(props);
+export const useCourse = useResource<CourseListItem, CourseQueryFilters>(props);

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

@@ -56,7 +56,7 @@ describe('useCreditCards', () => {
     expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
-    expect(result.current.states.isLoading).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
     expect(result.current.states.error).toBe(undefined);
 
     await act(async () => {
@@ -70,7 +70,7 @@ describe('useCreditCards', () => {
     expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
-    expect(result.current.states.isLoading).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });
 
@@ -91,7 +91,7 @@ describe('useCreditCards', () => {
     expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
-    expect(result.current.states.isLoading).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
     expect(result.current.states.error).toBe(undefined);
 
     await act(async () => {
@@ -106,7 +106,7 @@ describe('useCreditCards', () => {
     expect(result.current.states.creating).toBe(false);
     expect(result.current.states.deleting).toBe(false);
     expect(result.current.states.updating).toBe(false);
-    expect(result.current.states.isLoading).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });
 });

package/js/hooks/useDashboardAddressForm.tsx

@@ -1,13 +1,15 @@
 import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
-import { useEffect } from 'react';
-import { useForm } from 'react-hook-form';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormProvider, useForm } from 'react-hook-form';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import countries from 'i18n-iso-countries';
+import { Checkbox } from '@openfun/cunningham-react';
+
+import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
 import { messages as managementMessages } from 'components/AddressesManagement';
-import { getLocalizedErrorMessage } from 'components/AddressesManagement/validationSchema';
-import { CheckboxField, TextField } from 'components/Form';
+import { messages as formMessages } from 'components/Form/messages';
 import { CountrySelectField } from 'components/Form/CountrySelectField';
+import Input from 'components/Form/Input';
 import { Address } from 'types/Joanie';
 
 const messages = defineMessages({
@@ -52,93 +54,89 @@ export const useDashboardAddressForm = (address?: Address) => {
     is_main: true,
   } as AddressFormValues;
 
-  const { register, handleSubmit, reset, formState } = useForm<AddressFormValues>({
-    defaultValues,
-    mode: 'onChange',
+  const form = useForm<AddressFormValues>({
+    defaultValues: address || defaultValues,
+    mode: 'onBlur',
     reValidateMode: 'onChange',
     resolver: yupResolver(validationSchema),
   });
-
-  useEffect(() => {
-    reset(address || defaultValues);
-  }, [address]);
+  const { register, handleSubmit, formState } = form;
 
   const FormView = (
-    <form>
-      <TextField
-        aria-invalid={!!formState.errors.title}
-        required
-        id="title"
-        label={intl.formatMessage(managementMessages.titleInputLabel)}
-        error={!!formState.errors.title}
-        message={getLocalizedErrorMessage(intl, formState.errors.title?.message)}
-        {...register('title')}
-      />
-      <TextField
-        aria-invalid={!!formState.errors.first_name}
-        required
-        id="first_name"
-        label={intl.formatMessage(managementMessages.first_nameInputLabel)}
-        error={!!formState.errors.first_name}
-        message={getLocalizedErrorMessage(intl, formState.errors.first_name?.message)}
-        {...register('first_name')}
-      />
-      <TextField
-        aria-invalid={!!formState.errors.last_name}
-        required
-        id="last_name"
-        label={intl.formatMessage(managementMessages.last_nameInputLabel)}
-        error={!!formState.errors.last_name}
-        message={getLocalizedErrorMessage(intl, formState.errors.last_name?.message)}
-        {...register('last_name')}
-      />
-      <TextField
-        aria-invalid={!!formState.errors.address}
-        required
-        id="address"
-        label={intl.formatMessage(managementMessages.addressInputLabel)}
-        error={!!formState.errors.address}
-        message={getLocalizedErrorMessage(intl, formState.errors.address?.message)}
-        {...register('address')}
-      />
-      <TextField
-        aria-invalid={!!formState.errors.postcode}
-        required
-        id="postcode"
-        label={intl.formatMessage(managementMessages.postcodeInputLabel)}
-        error={!!formState.errors.postcode}
-        message={getLocalizedErrorMessage(intl, formState.errors.postcode?.message)}
-        {...register('postcode')}
-      />
-      <TextField
-        aria-invalid={!!formState.errors.city}
-        required
-        id="city"
-        label={intl.formatMessage(managementMessages.cityInputLabel)}
-        error={!!formState.errors.city}
-        message={getLocalizedErrorMessage(intl, formState.errors.city?.message)}
-        {...register('city')}
-      />
-      <CountrySelectField
-        aria-invalid={!!formState.errors.country}
-        required
-        id="country"
-        label={intl.formatMessage(managementMessages.countryInputLabel)}
-        error={!!formState.errors.country}
-        message={getLocalizedErrorMessage(intl, formState.errors.country?.message)}
-        {...register('country', { required: true })}
-      />
-      {!(address && address.is_main) && (
-        <CheckboxField
-          aria-invalid={!!formState.errors?.is_main}
-          id="is_main"
-          label={intl.formatMessage(messages.isMainInputLabel)}
-          error={!!formState.errors?.is_main}
-          message={getLocalizedErrorMessage(intl, formState.errors.is_main?.message)}
-          {...register('is_main')}
-        />
-      )}
-    </form>
+    <FormProvider {...form}>
+      <form className="form" noValidate>
+        <p className="form__required-fields-note">
+          <FormattedMessage {...formMessages.formOptionalFieldsText} />
+        </p>
+        <div className="form-row">
+          <Input
+            required
+            fullWidth
+            name="title"
+            label={intl.formatMessage(managementMessages.titleInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <Input
+            className="form-field"
+            required
+            name="first_name"
+            label={intl.formatMessage(managementMessages.first_nameInputLabel)}
+          />
+
+          <Input
+            className="form-field"
+            required
+            name="last_name"
+            label={intl.formatMessage(managementMessages.last_nameInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <Input
+            required
+            fullWidth
+            name="address"
+            label={intl.formatMessage(managementMessages.addressInputLabel)}
+          />
+        </div>
+
+        <div className="form-row">
+          <Input
+            className="form-field"
+            required
+            name="postcode"
+            label={intl.formatMessage(managementMessages.postcodeInputLabel)}
+          />
+
+          <Input
+            className="form-field"
+            required
+            name="city"
+            label={intl.formatMessage(managementMessages.cityInputLabel)}
+          />
+        </div>
+        <div className="form-row">
+          <CountrySelectField
+            name="country"
+            label={intl.formatMessage(managementMessages.countryInputLabel)}
+          />
+        </div>
+        {!(address && address.is_main) && (
+          <Checkbox
+            aria-invalid={!!formState.errors?.is_main}
+            id="is_main"
+            label={intl.formatMessage(messages.isMainInputLabel)}
+            state={formState.errors?.is_main ? 'error' : 'default'}
+            {...getLocalizedCunninghamErrorProp(
+              intl,
+              formState.errors.is_main?.message,
+              intl.formatMessage(formMessages.optionalFieldText),
+            )}
+            {...register('is_main')}
+          />
+        )}
+      </form>
+    </FormProvider>
   );
 
   return {

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

@@ -2,7 +2,7 @@ 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 { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { useDownloadCertificate } from 'hooks/useDownloadCertificate/index';
@@ -11,6 +11,7 @@ import { Certificate } from 'types/Joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { Deferred } from 'utils/test/deferred';
 import { CertificateFactory } from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/errors/handle');
 jest.mock('utils/context', () => ({
@@ -71,9 +72,19 @@ describe('useDownloadCertificate', () => {
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
     expect(result.current.loading).toBe(false);
 
-    result.current.download(certificate.id);
-    await waitFor(() => expect(result.current.loading).toBe(true));
-    deferred.resolve(200);
+    act(() => {
+      result.current.download(certificate.id);
+    });
+    expect(result.current.loading).toBe(true);
+
+    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);
@@ -94,7 +105,7 @@ describe('useDownloadCertificate', () => {
   it('handles an error if certificate download request fails', async () => {
     const certificate: Certificate = CertificateFactory().one();
     const DOWNLOAD_URL = `https://joanie.test/api/v1.0/certificates/${certificate.id}/download/`;
-    fetchMock.get(DOWNLOAD_URL, 401);
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
 
     const { result } = renderHook(() => useDownloadCertificate(), {
       wrapper: Wrapper,
@@ -108,7 +119,9 @@ describe('useDownloadCertificate', () => {
     // eslint-disable-next-line compat/compat
     expect(URL.revokeObjectURL).toHaveBeenCalledTimes(0);
 
-    await result.current.download(certificate.id);
+    act(() => {
+      result.current.download(certificate.id);
+    });
 
     await waitFor(() => {
       expect(fetchMock.called(DOWNLOAD_URL)).toBe(true);

package/js/hooks/useDownloadCertificate/index.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { handle } from 'utils/errors/handle';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
 
 export const useDownloadCertificate = () => {
   const [loading, setLoading] = useState(false);
@@ -9,25 +9,7 @@ export const useDownloadCertificate = () => {
   return {
     download: async (certificateId: string) => {
       setLoading(true);
-      try {
-        const $link = document.createElement('a');
-        const file = await API.user.certificates.download(certificateId);
-        // eslint-disable-next-line compat/compat
-        const url = URL.createObjectURL(file);
-        $link.href = url;
-        $link.download = '';
-
-        const revokeObject = () => {
-          // eslint-disable-next-line compat/compat
-          URL.revokeObjectURL(url);
-          window.removeEventListener('blur', revokeObject);
-        };
-
-        window.addEventListener('blur', revokeObject);
-        $link.click();
-      } catch (error) {
-        handle(error);
-      }
+      await browserDownloadFromBlob(() => API.user.certificates.download(certificateId));
       setLoading(false);
     },
     loading,

package/js/hooks/useEnrollments.ts

@@ -39,7 +39,7 @@ const props: UseResourcesProps<Enrollment, EnrollmentsQuery, API['user']['enroll
   onMutationSuccess: async (queryClient) => {
     // When enrollment creation/update succeeded, we have to invalidate orders queries
     // to refetch fresh data containing updated enrollments.
-    await queryClient.invalidateQueries(['user', 'orders']);
+    await queryClient.invalidateQueries({ queryKey: ['user', 'orders'] });
   },
 };
 /**

package/js/hooks/useJoanieUserAbilities/index.not.isJoanieEnabled.spec.tsx

@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { useJoanieUserAbilities } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+  }).one(),
+}));
+
+describe('useJoanieUserAbilities', () => {
+  it("should return undefined when joanie's not enabled", () => {
+    const { result } = renderHook(() => useJoanieUserAbilities());
+    expect(result.current).toBeUndefined();
+  });
+});

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

@@ -0,0 +1,68 @@
+import { act, renderHook, waitFor } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { PropsWithChildren } from 'react';
+import { IntlProvider } from 'react-intl';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { JoanieUserProfileFactory } from 'utils/test/factories/joanie';
+import { JoanieUserApiAbilityActions } from 'types/User';
+import { JoanieUserProfileActions } from 'utils/AbilitiesHelper/types';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { Deferred } from 'utils/test/deferred';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { useJoanieUserAbilities } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('useJoanieUserAbilities', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <JoanieSessionProvider>{children}</JoanieSessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+
+  beforeEach(() => {
+    fetchMock
+      .get('https://joanie.endpoint/api/v1.0/orders/', [])
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [])
+      .get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it("should return an entity with joanie's profile rights", async () => {
+    const responseDeferred = new Deferred();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/users/me/', responseDeferred.promise);
+
+    const { result } = renderHook(() => useJoanieUserAbilities(), {
+      wrapper: Wrapper,
+    });
+    expect(result.current).toBeUndefined();
+
+    await act(async () => {
+      responseDeferred.resolve(
+        JoanieUserProfileFactory({
+          abilities: {
+            [JoanieUserApiAbilityActions.HAS_ORGANIZATION_ACCESS]: false,
+            [JoanieUserApiAbilityActions.HAS_COURSE_ACCESS]: true,
+          },
+        }).one(),
+      );
+    });
+
+    await waitFor(() => expect(result.current).not.toBeUndefined());
+
+    expect(result.current?.can(JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD)).toBe(true);
+    expect(result.current?.cannot(JoanieUserProfileActions.ACCESS_TEACHER_DASHBOARD)).toBe(false);
+  });
+});

package/js/hooks/useJoanieUserAbilities/index.tsx

@@ -0,0 +1,11 @@
+import { isJoanieEnabled } from 'api/joanie';
+import { useJoanieUserProfile } from 'hooks/useJoanieUserProfile';
+import AbilitiesHelper from 'utils/AbilitiesHelper';
+
+export const useJoanieUserAbilities = () => {
+  if (isJoanieEnabled) {
+    const { item: joanieUserProfile } = useJoanieUserProfile();
+    return joanieUserProfile ? AbilitiesHelper.buildEntityInterface(joanieUserProfile) : undefined;
+  }
+  return undefined;
+};

package/js/hooks/useJoanieUserProfile.tsx

@@ -0,0 +1,34 @@
+import { defineMessages } from 'react-intl';
+import { API } from 'types/Joanie';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { JoanieUserProfile } from 'types/User';
+import { useSession } from 'contexts/SessionContext';
+import { ResourcesQuery, useResource, UseResourcesProps } from './useResources';
+
+const messages = defineMessages({
+  errorGet: {
+    id: 'hooks.useJoanieUserProfile.errorGet',
+    description: 'Error message shown to the user when user fetch request fails.',
+    defaultMessage:
+      'An error occurred while fetching user profile information. Please retry later.',
+  },
+  errorNotFound: {
+    id: 'hooks.useJoanieUserProfile.errorNotFound',
+    description: "Error message shown to the user when it isn't logged.",
+    defaultMessage: "You aren't logged in.",
+  },
+});
+
+const props: UseResourcesProps<JoanieUserProfile, ResourcesQuery, API['user']['me']> = {
+  queryKey: ['profile'],
+  apiInterface: () => useJoanieApi().user.me,
+  session: true,
+  messages,
+};
+/**
+ * Joanie Api hook to retrieve the authenticated user.
+ */
+export const useJoanieUserProfile = () => {
+  const { user } = useSession();
+  return useResource(props)(undefined, {}, { enabled: !!user });
+};