richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -1,6 +1,14 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
-import { act, findByText, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  findByText,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { AddressFactory } from 'utils/test/factories/joanie';
@@ -11,6 +19,7 @@ import { expectFetchCall } from 'utils/test/expectFetchCall';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -38,7 +47,7 @@ describe('<DashboardEditAddress/>', () => {
     addressUpdated.id = address.id;
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address]);
     const updateUrl = 'https://joanie.endpoint/api/v1.0/addresses/' + address.id + '/';
-    fetchMock.put(updateUrl, 200);
+    fetchMock.put(updateUrl, HttpStatusCode.OK);
 
     await act(async () => {
       render(
@@ -60,32 +69,32 @@ describe('<DashboardEditAddress/>', () => {
     // It doesn't show any errors.
     expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
     expectBreadcrumbsToEqualParts([
-      'Back',
+      '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' });
-    const titleInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Address title' });
-    const firstnameInput: HTMLInputElement = screen.getByRole('textbox', {
+    const $button = await screen.findByRole('button', { name: 'Save updates' });
+    const $titleInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Address title' });
+    const $firstnameInput: HTMLInputElement = screen.getByRole('textbox', {
       name: "Recipient's first name",
     });
-    const lastnameInput: HTMLInputElement = screen.getByRole('textbox', {
+    const $lastnameInput: HTMLInputElement = screen.getByRole('textbox', {
       name: "Recipient's last name",
     });
-    const addressInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Address' });
-    const cityInput: HTMLInputElement = screen.getByRole('textbox', { name: 'City' });
-    const postcodeInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Postcode' });
-    const countryInput: HTMLSelectElement = screen.getByRole('combobox', { name: 'Country' });
-
-    await waitFor(() => expect(titleInput.value).toBe(address.title));
-    expect(firstnameInput.value).toBe(address.first_name);
-    expect(lastnameInput.value).toBe(address.last_name);
-    expect(addressInput.value).toBe(address.address);
-    expect(cityInput.value).toBe(address.city);
-    expect(postcodeInput.value).toBe(address.postcode);
-    expect(countryInput.value).toBe(address.country);
+    const $addressInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Address' });
+    const $cityInput: HTMLInputElement = screen.getByRole('textbox', { name: 'City' });
+    const $postcodeInput: HTMLInputElement = screen.getByRole('textbox', { name: 'Postcode' });
+    const $countryInput: HTMLSelectElement = screen.getByRole('combobox', { name: 'Country' });
+
+    await waitFor(() => expect($titleInput.value).toBe(address.title));
+    expect($firstnameInput.value).toBe(address.first_name);
+    expect($lastnameInput.value).toBe(address.last_name);
+    expect($addressInput.value).toBe(address.address);
+    expect($cityInput.value).toBe(address.city);
+    expect($postcodeInput.value).toBe(address.postcode);
+    expect(within($countryInput).getByDisplayValue(address.country)).toBeInTheDocument();
 
     // Mock refresh route.
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [addressUpdated], {
@@ -96,8 +105,8 @@ describe('<DashboardEditAddress/>', () => {
     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);
+      fireEvent.change($titleInput, { target: { value: addressUpdated.title } });
+      fireEvent.click($button);
     });
     expect(fetchMock.called(updateUrl, { method: 'put' })).toBe(true);
 
@@ -123,7 +132,7 @@ describe('<DashboardEditAddress/>', () => {
 
     // Mock the edit API route to return a 500 status.
     const updateUrl = 'https://joanie.endpoint/api/v1.0/addresses/' + address.id + '/';
-    fetchMock.put(updateUrl, { status: 500, body: 'Bad request' });
+    fetchMock.put(updateUrl, { status: HttpStatusCode.INTERNAL_SERVER_ERROR, body: 'Bad request' });
 
     let container: HTMLElement | undefined;
     await act(async () => {
@@ -144,7 +153,7 @@ describe('<DashboardEditAddress/>', () => {
     });
 
     expectBreadcrumbsToEqualParts([
-      'Back',
+      'chevron_leftBack',
       'My preferences',
       'Edit address "' + address.title + '"',
     ]);

package/js/pages/DashboardAddressesManagement/DashboardEditAddress.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import Banner, { BannerType } from 'components/Banner';
-import { Button } from 'components/Button';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import { Spinner } from 'components/Spinner';
 import { useAddressesManagement } from 'hooks/useAddressesManagement';
@@ -35,7 +35,7 @@ export const DashboardEditAddress = ({ address, onSettled = noop }: DashboardEdi
   const { FormView, handleSubmit } = useDashboardAddressForm(address);
   const {
     methods: { update, remove },
-    states: { error, isLoading },
+    states: { error, isPending },
   } = useAddressesManagement();
 
   const onSubmit = (data: AddressFormValues) => {
@@ -54,12 +54,12 @@ export const DashboardEditAddress = ({ address, onSettled = noop }: DashboardEdi
       header={<FormattedMessage {...messages.header} values={{ title: address.title }} />}
       footer={
         <>
-          <Button color="outline-primary" onClick={handleSubmit(onSubmit)}>
+          <Button color="secondary" onClick={handleSubmit(onSubmit)}>
             <FormattedMessage {...messages.submit} />
           </Button>
           {!address.is_main && (
             <Button
-              color="outline-primary"
+              color="secondary"
               onClick={() => {
                 remove(address, {
                   onSuccess: () => onSettled(),
@@ -72,8 +72,8 @@ export const DashboardEditAddress = ({ address, onSettled = noop }: DashboardEdi
         </>
       }
     >
-      {isLoading && <Spinner />}
-      {!isLoading && (
+      {isPending && <Spinner />}
+      {!isPending && (
         <div>
           {error && <Banner message={error} type={BannerType.ERROR} rounded />}
           {FormView}

package/js/pages/DashboardAddressesManagement/DashboardEditAddressLoader.tsx

@@ -14,7 +14,7 @@ export const DashboardEditAddressLoader = () => {
   const params = useParams<{ addressId: string }>();
   const navigate = useDashboardNavigate();
   const {
-    states: { error, isLoading },
+    states: { error, isPending },
     ...address
   } = useAddress(params.addressId);
   useBreadcrumbsPlaceholders({
@@ -23,7 +23,7 @@ export const DashboardEditAddressLoader = () => {
 
   return (
     <>
-      {isLoading && <Spinner />}
+      {isPending && <Spinner />}
       {error && <Banner message={error} type={BannerType.ERROR} />}
       {address.item && (
         <DashboardEditAddress

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

@@ -21,6 +21,7 @@ import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqu
 import { resolveAll } from 'utils/resolveAll';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -59,7 +60,7 @@ describe('<DashAddressesManagement/>', () => {
       );
     });
 
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences']);
     // The empty placeholder is shown.
     await screen.findByText("You haven't created any addresses yet.");
     // No error is shown.
@@ -315,8 +316,8 @@ describe('<DashAddressesManagement/>', () => {
     AddressFactory().one();
     // Mock the API route to return a 500 error.
     fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', {
-      status: 500,
-      body: 'Bad request',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     await act(async () => {

package/js/pages/DashboardAddressesManagement/index.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import Banner, { BannerType } from 'components/Banner';
-import { Button } from 'components/Button';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { Spinner } from 'components/Spinner';
@@ -44,7 +44,7 @@ export const DashboardAddressesManagement = ({
   const intl = useIntl();
   const {
     methods: { promote, remove },
-    states: { error, isLoading },
+    states: { error, isPending },
     ...addresses
   } = useAddressesManagement();
 
@@ -63,8 +63,8 @@ export const DashboardAddressesManagement = ({
   return (
     <DashboardCard header={<FormattedMessage {...messages.header} />}>
       <div className="dashboard-addresses">
-        {isLoading && <Spinner />}
-        {!isLoading && (
+        {isPending && <Spinner />}
+        {!isPending && (
           <>
             {error && <Banner message={error} type={BannerType.ERROR} rounded />}
             {!error && addressesList.length === 0 && (
@@ -81,7 +81,7 @@ export const DashboardAddressesManagement = ({
                 promote={promote}
               />
             ))}
-            <Button color="outline-primary" onClick={() => onClickCreate?.()}>
+            <Button color="secondary" fullWidth onClick={() => onClickCreate?.()}>
               <Icon name={IconTypeEnum.PLUS} className="button__icon" />
               <FormattedMessage {...messages.add} />
             </Button>

package/js/pages/DashboardCertificates/index.spec.tsx

@@ -15,6 +15,7 @@ import { SessionProvider } from 'contexts/SessionContext';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { CertificateFactory } from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -155,8 +156,8 @@ describe('<DashboardCertificates/>', () => {
 
   it('shows an error when request to retrieve certificates fails', async () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/certificates/?page=1&page_size=10', {
-      status: 500,
-      body: 'Internal error',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     render(

package/js/pages/DashboardCertificates/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { keepPreviousData } from '@tanstack/query-core';
 import { Pagination, usePagination } from 'components/Pagination';
 import { useCertificates } from 'hooks/useCertificates';
 import { Spinner } from 'components/Spinner';
@@ -27,7 +28,7 @@ export const DashboardCertificates = () => {
       page: pagination.currentPage,
       page_size: pagination.itemsPerPage,
     },
-    { keepPreviousData: true },
+    { placeholderData: keepPreviousData },
   );
   useEffect(() => {
     if (certificates.meta?.pagination?.count) {

package/js/pages/DashboardContracts/_styles.scss

@@ -0,0 +1,8 @@
+.dashboard-contracts {
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    position: relative;
+  }
+}

package/js/pages/DashboardContracts/index.spec.tsx

@@ -0,0 +1,147 @@
+import { render, screen } from '@testing-library/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { Contract } from 'types/Joanie';
+import { resolveAll } from 'utils/resolveAll';
+import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
+import { expectBannerError, expectBannerInfo } from 'utils/test/expectBanner';
+import { Deferred } from 'utils/test/deferred';
+import { History, HistoryContext } from 'hooks/useHistory';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { ContractFactory } from 'utils/test/factories/joanie';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  location: {},
+  scroll: jest.fn(),
+}));
+
+describe('<DashboardContract/>', () => {
+  const historyPushState = jest.fn();
+  const historyReplaceState = jest.fn();
+  const makeHistoryOf: (params: any) => History = () => [
+    {
+      state: { name: '', data: {} },
+      title: '',
+      url: `/`,
+    },
+    historyPushState,
+    historyReplaceState,
+  ];
+  const Wrapper = () => (
+    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <IntlProvider locale="en">
+        <HistoryContext.Provider value={makeHistoryOf({})}>
+          <SessionProvider>
+            <DashboardTest initialRoute={LearnerDashboardPaths.CONTRACTS} />
+          </SessionProvider>
+        </HistoryContext.Provider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('renders an empty list of contract', async () => {
+    const listContractsDeferred = new Deferred();
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/contracts/?page=1&page_size=10',
+      listContractsDeferred.promise,
+    );
+
+    render(<Wrapper />);
+
+    // Make sure the spinner appear during first load.
+    await expectSpinner('Loading training contracts...');
+
+    listContractsDeferred.resolve({
+      results: [],
+      next: null,
+      previous: null,
+      count: 30,
+    });
+    await expectNoSpinner('Loading training contract...');
+
+    await expectBannerInfo('You have no training contract yet.');
+  });
+
+  it('renders 3 pages of contracts', async () => {
+    const contracts: Contract[] = ContractFactory().many(30);
+    const contractPage1 = contracts.slice(0, 10);
+    const contractPage2 = contracts.slice(10, 20);
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/contracts/?page=1&page_size=10', {
+      results: contractPage1,
+      next: null,
+      previous: null,
+      count: 30,
+    });
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/contracts/?page=2&page_size=10', contractPage2);
+
+    render(<Wrapper />);
+
+    await expectNoSpinner('Loading contracts...');
+
+    // Make sure the first page is loaded.
+    await screen.findByText('Currently reading page 1');
+    await resolveAll(contractPage1, async (contract) => {
+      await screen.findByText(contract.definition.title);
+    });
+
+    // Go to page 2.
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Next page 2'));
+
+    // Make sure the second page is loaded.
+    await screen.findByText('Currently reading page 2');
+    await resolveAll(contractPage2, async (contract) => {
+      await screen.findByText(contract.definition.title);
+    });
+
+    // Go back to page 1.
+    await user.click(screen.getByText('Previous page 1'));
+
+    await screen.findByText('Currently reading page 1');
+    await resolveAll(contractPage1, async (contract) => {
+      await screen.findByText(contract.definition.title);
+    });
+  });
+
+  it('shows an error when request to retrieve contract fails', async () => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/contracts/?page=1&page_size=10', {
+      status: 500,
+      body: 'Internal error',
+    });
+
+    render(<Wrapper />);
+
+    // Make sure error is shown.
+    await expectBannerError('An error occurred while fetching contracts. Please retry later.');
+
+    // ... and the spinner hidden.
+    await expectNoSpinner('Loading ...');
+  });
+});

package/js/pages/DashboardContracts/index.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Pagination, usePagination } from 'components/Pagination';
+import { Spinner } from 'components/Spinner';
+import Banner, { BannerType } from 'components/Banner';
+import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract';
+import { useUserContracts } from 'hooks/useContracts';
+import { NestedCredentialOrder } from 'types/Joanie';
+
+const messages = defineMessages({
+  loading: {
+    defaultMessage: 'Loading training contracts...',
+    description: 'Message displayed while loading training contracts',
+    id: 'components.DashboardContracts.loading',
+  },
+  empty: {
+    defaultMessage: 'You have no training contract yet.',
+    description: 'Message displayed when there are no training contracts',
+    id: 'components.DashboardContracts.empty',
+  },
+});
+
+export const DashboardContracts = () => {
+  const intl = useIntl();
+  const pagination = usePagination({});
+  const {
+    items: contracts,
+    meta,
+    states: { error, fetching },
+  } = useUserContracts({
+    page: pagination.currentPage,
+    page_size: pagination.itemsPerPage,
+  });
+  const { pagination: contractPagination } = meta || {};
+  const { count } = contractPagination || {};
+  useEffect(() => {
+    if (count) {
+      pagination.setItemsCount(count);
+    }
+  }, [count]);
+
+  return (
+    <div className="dashboard-contracts">
+      {error && <Banner message={error} type={BannerType.ERROR} />}
+      {contracts.length === 0 && fetching ? (
+        <Spinner aria-labelledby="loading-contract-data">
+          <span id="loading-contract-data">
+            <FormattedMessage {...messages.loading} />
+          </span>
+        </Spinner>
+      ) : (
+        <div>
+          {contracts.length === 0 ? (
+            <Banner message={intl.formatMessage(messages.empty)} type={BannerType.INFO} />
+          ) : (
+            <>
+              <div className="dashboard-contracts__list">
+                {contracts.map((contract) => (
+                  <DashboardItemContract
+                    key={`DashboardItemContract_${contract.id}`}
+                    title={contract.order.product_title}
+                    order={contract.order as NestedCredentialOrder}
+                    contract_definition={contract.definition}
+                    contract={contract}
+                    writable={true}
+                  />
+                ))}
+              </div>
+              <Pagination {...pagination} />
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};