richie 2.25.1__py2.py3-none-any.whl → 2.26.0__py2.py3-none-any.whl

frontend/js/hooks/useOpenEdxProfile/index.ts

@@ -1,7 +1,12 @@
 import { useCallback, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { UseQueryOptions, useQueryClient } from '@tanstack/react-query';
 import { AuthenticationApi } from 'api/authentication';
 import { useSessionQuery } from 'utils/react-query/useSessionQuery';
+import { useSessionMutation } from 'utils/react-query/useSessionMutation';
+import { OpenEdxFullNameFormValues } from 'components/OpenEdxFullNameForm';
+import { HttpError } from 'utils/errors/HttpError';
+import { TSessionQueryKey } from 'utils/react-query/useSessionKey';
 import { OpenEdxProfile, parseOpenEdxApiProfile } from './utils';
 
 const messages = defineMessages({
@@ -10,13 +15,26 @@ const messages = defineMessages({
     description: 'Error message shown to the user when openEdx profile fetch request fails.',
     defaultMessage: 'An error occurred while fetching your profile. Please retry later.',
   },
+  errorUpdate: {
+    id: 'hooks.useOpenEdxProfile.errorUpdate',
+    description:
+      'Error message shown to the user when openEdx profile fullname post request fails.',
+    defaultMessage: 'An error occurred while updating your full name. Please retry later.',
+  },
 });
 
 interface UseOpenEdxProfileProps {
   username: string;
+  onUpdateSuccess?: () => void;
 }
 
-const useOpenEdxProfile = ({ username }: UseOpenEdxProfileProps) => {
+const useOpenEdxProfile = (
+  { username, onUpdateSuccess }: UseOpenEdxProfileProps,
+  queryOptions?: Omit<
+    UseQueryOptions<OpenEdxProfile, HttpError, OpenEdxProfile, TSessionQueryKey>,
+    'queryKey' | 'queryFn'
+  >,
+) => {
   if (!AuthenticationApi) {
     throw new Error('AuthenticationApi is not defined');
   }
@@ -27,6 +45,19 @@ const useOpenEdxProfile = ({ username }: UseOpenEdxProfileProps) => {
 
   const intl = useIntl();
   const [error, setError] = useState<string>();
+  const queryClient = useQueryClient();
+
+  const invalidate = async () => {
+    // Invalidate all queries related to the resource
+    await queryClient.invalidateQueries({ queryKey: ['user', 'open-edx-profile'] });
+    await queryClient.invalidateQueries({ queryKey: ['user'], exact: true });
+  };
+
+  const onSuccess = async () => {
+    setError(undefined);
+    await invalidate();
+    onUpdateSuccess?.();
+  };
 
   const queryFn: () => Promise<OpenEdxProfile> = useCallback(async () => {
     try {
@@ -38,8 +69,35 @@ const useOpenEdxProfile = ({ username }: UseOpenEdxProfileProps) => {
     return Promise.reject();
   }, [username, AuthenticationApi]);
 
-  const [queryHandler] = useSessionQuery<OpenEdxProfile>(['open-edx-profile'], queryFn);
-  return { data: queryHandler.data, error };
+  const [readHandler] = useSessionQuery<OpenEdxProfile>(
+    ['open-edx-profile'],
+    queryFn,
+    queryOptions,
+  );
+
+  const mutation = useSessionMutation;
+  const writeHandlers = {
+    update: mutation({
+      mutationFn: (data: OpenEdxFullNameFormValues) =>
+        AuthenticationApi!.account!.update(username, data),
+      onSuccess,
+      onError: () => setError(intl.formatMessage(messages.errorUpdate)),
+    }),
+  };
+
+  return {
+    data: readHandler.data,
+    methods: {
+      invalidate,
+      refetch: readHandler.refetch,
+      update: writeHandlers.update.mutate,
+    },
+    states: {
+      isFetched: readHandler.isFetched,
+      isPending: [...Object.values(writeHandlers), readHandler].some((value) => value?.isPending),
+    },
+    error,
+  };
 };
 
 export default useOpenEdxProfile;

frontend/js/hooks/useOpenEdxProfile/utils/index.spec.ts

@@ -1,5 +1,4 @@
 import { createIntl } from 'react-intl';
-import { faker } from '@faker-js/faker';
 import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { OpenEdxGender, OpenEdxLanguageIsoCode, OpenEdxLevelOfEducation } from 'types/openEdx';
 import { parseOpenEdxApiProfile } from '.';
@@ -35,35 +34,4 @@ describe('useOpenEdxProfile > utils', () => {
       dateJoined: '01/01/1970',
     });
   });
-
-  it('parseOpenEdxApiProfile should format default values', () => {
-    const profile = parseOpenEdxApiProfile(
-      createIntl({ locale: 'en' }),
-      OpenEdxApiProfileFactory({
-        username: faker.internet.userName(),
-        name: '',
-        email: faker.internet.email(),
-        'pref-lang': undefined,
-        country: null,
-        level_of_education: null,
-        gender: null,
-        year_of_birth: null,
-        language_proficiencies: [],
-        date_joined: Date.toString(),
-      }).one(),
-    );
-
-    expect(profile).toStrictEqual({
-      username: profile.username,
-      name: ' - ',
-      email: profile.email,
-      language: ' - ',
-      country: ' - ',
-      levelOfEducation: ' - ',
-      gender: ' - ',
-      yearOfBirth: ' - ',
-      favoriteLanguage: ' - ',
-      dateJoined: profile.dateJoined,
-    });
-  });
 });

frontend/js/hooks/useOpenEdxProfile/utils/index.ts

@@ -73,12 +73,12 @@ export const genderMessages = defineMessages<OpenEdxGender>({
 });
 
 export interface OpenEdxProfile {
-  username: Maybe<string>;
+  username: string;
   name: Maybe<string>;
   country: Maybe<string>;
   yearOfBirth: Maybe<string>;
   levelOfEducation: Maybe<string>;
-  email: Maybe<string>;
+  email: string;
   dateJoined: Maybe<string>;
   gender: Maybe<string>;
   language: Maybe<string>;
@@ -87,45 +87,26 @@ export interface OpenEdxProfile {
 
 export const parseOpenEdxApiProfile = (
   intl: IntlShape,
-  data?: OpenEdxApiProfile,
+  data: OpenEdxApiProfile,
 ): OpenEdxProfile => {
   const [languageCode] = intl.locale.split('-');
-  const defaultValues: OpenEdxProfile = {
-    username: ' - ',
-    name: ' - ',
-    email: ' - ',
-    language: ' - ',
-    country: ' - ',
-    levelOfEducation: ' - ',
-    gender: ' - ',
-    yearOfBirth: ' - ',
-    favoriteLanguage: ' - ',
-    dateJoined: undefined,
-  };
-
   const languageNames = new Intl.DisplayNames([intl.locale], { type: 'language' });
-  const parsedData = data
-    ? {
-        username: data.username || defaultValues.username,
-        name: data.name || defaultValues.name,
-        email: data.email || defaultValues.email,
-        yearOfBirth: data.year_of_birth || defaultValues.yearOfBirth,
-        dateJoined: data.date_joined || defaultValues.dateJoined,
-        levelOfEducation: data.level_of_education
-          ? intl.formatMessage(levelOfEducationMessages[data.level_of_education])
-          : defaultValues.levelOfEducation,
-        gender: data.gender
-          ? intl.formatMessage(genderMessages[data.gender])
-          : defaultValues.gender,
-        country: data.country
-          ? countries.getName(data.country, languageCode)
-          : defaultValues.country,
-        language: data['pref-lang'] ? languageNames.of(data['pref-lang']) : defaultValues.language,
-        favoriteLanguage: data.language_proficiencies.length
-          ? languageNames.of(data.language_proficiencies[0].code)
-          : defaultValues.favoriteLanguage,
-      }
-    : defaultValues;
+  const parsedData = {
+    username: data.username,
+    name: data.name || undefined,
+    email: data.email,
+    yearOfBirth: data.year_of_birth || undefined,
+    dateJoined: data.date_joined || undefined,
+    levelOfEducation: data.level_of_education
+      ? intl.formatMessage(levelOfEducationMessages[data.level_of_education])
+      : undefined,
+    gender: data.gender ? intl.formatMessage(genderMessages[data.gender]) : undefined,
+    country: data.country ? countries.getName(data.country, languageCode) : undefined,
+    language: data['pref-lang'] ? languageNames.of(data['pref-lang']) : undefined,
+    favoriteLanguage: data.language_proficiencies.length
+      ? languageNames.of(data.language_proficiencies[0].code)
+      : undefined,
+  };
 
   return parsedData;
 };

frontend/js/hooks/useUnionResource/index.spec.tsx

@@ -336,6 +336,7 @@ describe('useUnionResource', () => {
 
     calledUrls = fetchMock.calls().map((call) => call[0]);
     expectedQueries += 1; // fetch dataA first page
+    expectedQueries += 1; // fetch dataB first page
     expect(calledUrls).toHaveLength(expectedQueries);
     expect(calledUrls).toContain('http://data.a/?isFiltered=true&page=1');
     expect(result.current.hasMore).toBe(false);

frontend/js/hooks/useUnionResource/index.ts

@@ -94,11 +94,8 @@ const useUnionResource = <
 
   // to force execution of useEffect::fetchNewPage(),
   // reset need to generate a uniq key that is part of it's dependencies.
-  const reset = (eofKey?: string) => {
-    if (eofKey) {
-      delete eofRef.current[eofKey];
-    }
-
+  const reset = () => {
+    eofRef.current = {};
     setStack([]);
     setPage(0);
     setTotalCount(undefined);
@@ -112,10 +109,10 @@ const useUnionResource = <
   // by generating a new update key
   if (refetchOnInvalidation) {
     useQueryKeyInvalidateListener(queryAConfig.queryKey, () => {
-      reset(queryAConfig.queryKey.join('-'));
+      reset();
     });
     useQueryKeyInvalidateListener(queryBConfig.queryKey, () => {
-      reset(queryBConfig.queryKey.join('-'));
+      reset();
     });
   }
 

frontend/js/hooks/useUnionResource/utils/fetchEntity.ts

@@ -60,6 +60,7 @@ export const fetchEntity = async <
   }
 
   if (data) {
+    eofRef.current = { ...eofRef.current, [queryKeyString]: Math.ceil(data.count / perPage) };
     return data;
   }
   try {

frontend/js/pages/DashboardAddressesManagement/DashboardCreateAddress.spec.tsx

@@ -5,7 +5,10 @@ import { getByText, render, screen, waitFor } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import userEvent, { UserEvent } from '@testing-library/user-event';
 import { PropsWithChildren } from 'react';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
@@ -18,6 +21,7 @@ import { changeSelect } from 'components/Form/test-utils';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { User } from 'types/User';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -56,8 +60,9 @@ const fillForm = async (address: Address, user: UserEvent = userEvent.setup()) =
 };
 
 describe('<DashboardCreateAddress/>', () => {
+  let richieUser: User;
   const Wrapper = ({ children }: PropsWithChildren) => (
-    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+    <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
       <IntlProvider locale="en">
         <SessionProvider>{children}</SessionProvider>
       </IntlProvider>
@@ -66,6 +71,7 @@ describe('<DashboardCreateAddress/>', () => {
   let user: UserEvent;
 
   beforeEach(() => {
+    richieUser = UserFactory().one();
     user = userEvent.setup();
     fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
@@ -122,8 +128,10 @@ describe('<DashboardCreateAddress/>', () => {
   });
 
   it('creates an address and redirect to preferences', async () => {
+    fetchMock.get('https://demo.endpoint/api/v1.0/user/me', richieUser);
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
     fetchMock.post('https://joanie.endpoint/api/v1.0/addresses/', []);
+
     render(
       <Wrapper>
         <DashboardTest initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_CREATION} />
@@ -141,6 +149,9 @@ describe('<DashboardCreateAddress/>', () => {
     await fillForm(address, user);
 
     // Form submit calls the API create route.
+    fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${richieUser.username}`, {});
+    fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${richieUser.username}`, {});
+
     expect(
       fetchMock.called('https://joanie.endpoint/api/v1.0/addresses/', { method: 'post' }),
     ).toBe(false);

frontend/js/pages/DashboardAddressesManagement/DashboardEditAddress.spec.tsx

@@ -10,7 +10,11 @@ import {
   within,
 } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import userEvent from '@testing-library/user-event';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
@@ -50,30 +54,35 @@ describe('<DashboardEditAddress/>', () => {
     const updateUrl = 'https://joanie.endpoint/api/v1.0/addresses/' + address.id + '/';
     fetchMock.put(updateUrl, HttpStatusCode.OK);
 
-    await act(async () => {
-      render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <SessionProvider>
-              <DashboardTest
-                initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
-                  ':addressId',
-                  address.id,
-                )}
-              />
-            </SessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      );
+    const richieUser = UserFactory().one();
+    fetchMock.get('https://demo.endpoint/api/v1.0/user/me', richieUser);
+    fetchMock.get(`https://demo.endpoint/api/user/v1/accounts/${richieUser.username}`, {});
+    fetchMock.get(`https://demo.endpoint/api/user/v1/preferences/${richieUser.username}`, {});
+
+    render(
+      <QueryClientProvider client={createTestQueryClient({ user: richieUser })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <DashboardTest
+              initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
+                ':addressId',
+                address.id,
+              )}
+            />
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>,
+    );
+    await waitFor(() => {
+      expectBreadcrumbsToEqualParts([
+        'chevron_leftBack',
+        'My preferences',
+        'Edit address "' + address.title + '"',
+      ]);
     });
 
     // It doesn't show any errors.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
-    expectBreadcrumbsToEqualParts([
-      'chevron_leftBack',
-      'My preferences',
-      'Edit address "' + address.title + '"',
-    ]);
 
     // The form fields are correctly set to the `address` ones.
     const $button = await screen.findByRole('button', { name: 'Save updates' });
@@ -104,11 +113,10 @@ describe('<DashboardEditAddress/>', () => {
 
     // Submit of the form calls the API edit route.
     expect(fetchMock.called(updateUrl, { method: 'put' })).toBe(false);
-    await act(async () => {
-      // it is not necessary to update all fields as it is mocked above.
-      fireEvent.change($titleInput, { target: { value: addressUpdated.title } });
-      fireEvent.click($button);
-    });
+    const user = userEvent.setup();
+    await user.clear($titleInput);
+    await user.type($titleInput, addressUpdated.title);
+    await user.click($button);
     expect(fetchMock.called(updateUrl, { method: 'put' })).toBe(true);
 
     // The API is called with correct body.
@@ -135,29 +143,27 @@ describe('<DashboardEditAddress/>', () => {
     const updateUrl = 'https://joanie.endpoint/api/v1.0/addresses/' + address.id + '/';
     fetchMock.put(updateUrl, { status: HttpStatusCode.INTERNAL_SERVER_ERROR, body: 'Bad request' });
 
-    let container: HTMLElement | undefined;
-    await act(async () => {
-      container = render(
-        <QueryClientProvider client={createTestQueryClient({ user: true })}>
-          <IntlProvider locale="en">
-            <JoanieSessionProvider>
-              <DashboardTest
-                initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
-                  ':addressId',
-                  address.id,
-                )}
-              />
-            </JoanieSessionProvider>
-          </IntlProvider>
-        </QueryClientProvider>,
-      ).container;
+    const { container } = render(
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <JoanieSessionProvider>
+            <DashboardTest
+              initialRoute={LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(
+                ':addressId',
+                address.id,
+              )}
+            />
+          </JoanieSessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>,
+    );
+    await waitFor(() => {
+      expectBreadcrumbsToEqualParts([
+        'chevron_leftBack',
+        'My preferences',
+        'Edit address "' + address.title + '"',
+      ]);
     });
-
-    expectBreadcrumbsToEqualParts([
-      'chevron_leftBack',
-      'My preferences',
-      'Edit address "' + address.title + '"',
-    ]);
     // It doesn't show any errors.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
 

frontend/js/pages/DashboardAddressesManagement/index.spec.tsx

@@ -52,6 +52,7 @@ describe('<DashAddressesManagement/>', () => {
     }).one();
     const { 'pref-lang': prefLang, ...openEdxAccount } = openEdxProfile;
 
+    fetchMock.get('https://endpoint.test/api/v1.0/user/me', richieUser);
     fetchMock.get(
       `https://endpoint.test/api/user/v1/accounts/${richieUser.username}`,
       openEdxAccount,

frontend/js/pages/DashboardCertificates/_styles.scss

@@ -1,4 +1,8 @@
 .dashboard-certificates {
+  &__content {
+    margin-top: rem-calc(8px);
+  }
+
   &__list {
     display: flex;
     flex-direction: column;

frontend/js/pages/DashboardCertificates/components/CertificateList/index.tsx

@@ -0,0 +1,83 @@
+import { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { keepPreviousData } from '@tanstack/query-core';
+import classNames from 'classnames';
+import { Pagination, usePagination } from 'components/Pagination';
+import { useCertificates } from 'hooks/useCertificates';
+import { Spinner } from 'components/Spinner';
+import Banner, { BannerType } from 'components/Banner';
+import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate';
+import { CertificateType } from 'types/Joanie';
+import { PER_PAGE } from 'settings';
+
+const messages = defineMessages({
+  loading: {
+    defaultMessage: 'Loading certificates...',
+    description: 'Message displayed while loading certificates',
+    id: 'components.DashboardCertificates.loading',
+  },
+  empty: {
+    defaultMessage: 'You have no certificates yet.',
+    description: 'Message displayed when there are no certificates',
+    id: 'components.DashboardCertificates.empty',
+  },
+});
+
+interface CertificatesListProps {
+  certificateType: CertificateType;
+}
+const CertificatesList = ({ certificateType }: CertificatesListProps) => {
+  const intl = useIntl();
+  const pagination = usePagination({ itemsPerPage: PER_PAGE.certificateList });
+  const certificates = useCertificates(
+    {
+      type: certificateType,
+      page: pagination.currentPage,
+      page_size: pagination.itemsPerPage,
+    },
+    { placeholderData: keepPreviousData },
+  );
+
+  useEffect(() => {
+    if (certificates.meta?.pagination?.count) {
+      pagination.setItemsCount(certificates.meta.pagination.count);
+    }
+  }, [certificates.meta?.pagination?.count]);
+
+  if (certificates.states.error) {
+    return <Banner message={certificates.states.error} type={BannerType.ERROR} />;
+  }
+
+  return (
+    <div>
+      {certificates.items.length === 0 && certificates.states.fetching ? (
+        <Spinner aria-labelledby="loading-certificates-data">
+          <span id="loading-certificates-data">
+            <FormattedMessage {...messages.loading} />
+          </span>
+        </Spinner>
+      ) : (
+        certificates.items.length === 0 && (
+          <Banner message={intl.formatMessage(messages.empty)} type={BannerType.INFO} />
+        )
+      )}
+
+      {certificates.items.length > 0 && (
+        <>
+          <div
+            className={classNames('dashboard-certificates__list', {
+              'dashboard__list--loading': certificates.states.fetching,
+            })}
+          >
+            {certificates.items.map((certificate) => (
+              <DashboardItemCertificate key={certificate.id} certificate={certificate} />
+            ))}
+          </div>
+          <Pagination {...pagination} />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default CertificatesList;