richie-education 3.3.2-dev6 → 3.4.1-dev13

package/js/components/SaleTunnel/AddressSelector/index.tsx

@@ -75,7 +75,8 @@ export const AddressSelector = () => {
         <Button
           size="small"
           icon={<span className="material-icons">edit</span>}
-          color="tertiary"
+          color="brand"
+          variant="tertiary"
           onClick={editFormModal.open}
           fullWidth={isMobile}
         >
@@ -85,7 +86,8 @@ export const AddressSelector = () => {
         <Button
           size="small"
           icon={<span className="material-icons">add</span>}
-          color="primary"
+          color="brand"
+          variant="primary"
           onClick={createFormModal.open}
           fullWidth={isMobile}
         >

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
 import { Step, StepLabel, Stepper } from '@mui/material';
@@ -96,7 +96,7 @@ export const SaleTunnelInformationGroup = () => {
   );
 };
 
-const EMAIL_REGEX = /^[\w.-]+@([\w-]+\.)+[\w-]{2,4}$/;
+const EMAIL_REGEX = /^[\w.+\-]+@([\w-]+\.)+[\w-]{2,4}$/;
 
 export const validationSchema = Yup.object().shape({
   offering_id: Yup.string().required(),
@@ -197,7 +197,7 @@ const BatchOrderForm = () => {
   const form = useForm<BatchOrder>({
     defaultValues: batchOrder || defaultValues,
     mode: 'onBlur',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<BatchOrder>,
   });
   const { watch } = form;
   const values = watch();
@@ -268,7 +268,8 @@ const BatchOrderForm = () => {
             }
           }}
           hidden={activeStep === 0}
-          color="tertiary"
+          color="brand"
+          variant="tertiary"
         >
           <FormattedMessage {...messages.previousButton} />
         </Button>

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx

@@ -143,7 +143,7 @@ const messages = defineMessages({
     id: 'components.SaleTunnel.Information.cpf.description',
     description: 'Explanatory text for the CPF payment option',
     defaultMessage:
-      'Pay for your training using your personal training account (CPF) on Mon Compte Formation.',
+      'Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation.',
   },
   cpfButtonLabel: {
     id: 'components.SaleTunnel.Information.cpf.buttonLabel',
@@ -236,7 +236,12 @@ export const SaleTunnelInformationSingular = () => {
         </div>
       )}
       {paymentMode === PaymentMode.CPF ? (
-        <CpfPayment deepLink={deepLink!} />
+        <CpfPayment
+          deepLink={deepLink!}
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
       ) : (
         <>
           {needsPayment && (
@@ -443,7 +448,13 @@ const Voucher = ({
             label={intl.formatMessage(messages.voucherTitle)}
             disabled={!!voucherCode}
           />
-          <Button size="small" color="primary" onClick={submitVoucher} disabled={!!voucherCode}>
+          <Button
+            size="small"
+            color="brand"
+            variant="primary"
+            onClick={submitVoucher}
+            disabled={!!voucherCode}
+          >
             <FormattedMessage {...messages.voucherValidate} />
           </Button>
         </div>
@@ -493,14 +504,24 @@ const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
   );
 };
 
-const CpfPayment = ({ deepLink }: { deepLink: string }) => {
+const CpfPayment = ({
+  deepLink,
+  discount,
+  voucherError,
+  setVoucherError,
+}: {
+  deepLink: string;
+  discount?: string;
+  voucherError: HttpError | null;
+  setVoucherError: (value: HttpError | null) => void;
+}) => {
   return (
     <div className="sale-tunnel__cpf">
       <p className="description mb-s">
         <FormattedMessage {...messages.cpfDescription} />
       </p>
       <Button
-        color="primary"
+        color="brand"
         fullWidth={true}
         href={deepLink}
         target="_blank"
@@ -508,6 +529,7 @@ const CpfPayment = ({ deepLink }: { deepLink: string }) => {
       >
         <FormattedMessage {...messages.cpfButtonLabel} />
       </Button>
+      <Voucher discount={discount} voucherError={voucherError} setVoucherError={setVoucherError} />
     </div>
   );
 };

package/js/components/SaleTunnel/SaleTunnelSuccess/index.tsx

@@ -20,7 +20,7 @@ const messages = defineMessages({
   },
   successDetailMessage: {
     defaultMessage:
-      'You will be able to start your training once the first installment will be paid.',
+      'You’ll be able to start your training once the first installment has been paid, or once access opens if no payment is required.',
     description: 'Text to explain when the user will be able to start its training.',
     id: 'components.SaleTunnelSuccess.successDetailMessage',
   },

package/js/components/SaleTunnel/SubscriptionButton/index.tsx

@@ -110,9 +110,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     paymentMode,
   } = useSaleTunnelContext();
 
-  if (paymentMode === PaymentMode.CPF) {
-    return null;
-  }
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const { methods: batchOrderMethods } = useBatchOrder();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
@@ -138,12 +135,17 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
-    if (!billingAddress && needsPayment) {
+    if (!billingAddress && needsPayment && paymentMode !== PaymentMode.CPF) {
       handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
       return;
     }
 
-    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight && needsPayment) {
+    if (
+      !saleTunnelProps.isWithdrawable &&
+      !hasWaivedWithdrawalRight &&
+      needsPayment &&
+      paymentMode !== PaymentMode.CPF
+    ) {
       handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
       return;
     }
@@ -201,6 +203,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
   };
 
   const walkthroughMessages = useMemo(() => {
+    if (batchOrder) return;
     if (product.contract_definition && product.price > 0) {
       return messages.walkthroughToSignAndSavePayment;
     } else if (product.contract_definition && product.price === 0) {
@@ -208,7 +211,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     } else if (!product.contract_definition && product.price > 0 && needsPayment) {
       return messages.walkthroughToSavePayment;
     }
-  }, [product, creditCard, needsPayment]);
+  }, [product, creditCard, needsPayment, batchOrder]);
 
   useEffect(() => {
     if (order) nextStep();

package/js/components/SaleTunnel/_styles.scss

@@ -32,12 +32,13 @@
     &__right {
       flex: 1;
       overflow: hidden;
+      position: relative;
     }
 
     &__column {
       display: flex;
       flex-direction: column;
-      gap: var(--c--theme--spacings--b);
+      gap: var(--c--globals--spacings--b);
     }
   }
 
@@ -135,7 +136,7 @@
       margin-top: 1rem;
       display: flex;
       justify-content: space-between;
-      font-size: var(--c--theme--font--sizes--l);
+      font-size: var(--c--globals--font--sizes--md);
     }
   }
 
@@ -159,8 +160,8 @@
       gap: 0.5rem;
 
       .title {
-        font-weight: var(--c--theme--font--weights--bold);
-        font-size: var(--c--theme--font--sizes--l);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-size: var(--c--globals--font--sizes--md);
         margin: 0 0 0.5rem;
       }
 
@@ -209,17 +210,17 @@
 }
 
 .block-title {
-  font-size: var(--c--theme--font--sizes--l);
+  font-size: var(--c--globals--font--sizes--md);
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--extrabold);
+  font-weight: var(--c--globals--font--weights--extrabold);
   text-align: left;
-  font-family: var(--c--theme--font--families--accent);
+  font-family: var(--c--globals--font--families--accent);
 }
 
 .sub-block-title {
   font-size: 12px;
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--bold);
+  font-weight: var(--c--globals--font--weights--bold);
   text-align: left;
 }
 

package/js/components/SaleTunnel/index.credential.spec.tsx

@@ -166,7 +166,9 @@ describe('SaleTunnel / Credential', () => {
 
     // - CPF description and redirect button should be visible.
     expect(
-      screen.getByText(/pay for your training using your personal training account/i),
+      screen.getByText(
+        /purchase your training course by using your Personal Training Account \(CPF\) on Mon Compte Formation/i,
+      ),
     ).toBeInTheDocument();
     const cpfButton = screen.getByRole('link', { name: /go to mon compte formation/i });
 
@@ -222,4 +224,51 @@ describe('SaleTunnel / Credential', () => {
     // - Classic billing information section should be displayed.
     expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
   });
+
+  it('should display voucher input and subscribe button in CPF mode', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const deepLink = 'https://placeholder.com/course/1';
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: deepLink },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    const user = userEvent.setup({ delay: null });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', { level: 3, name: /payment method/i });
+
+    // Switch to CPF mode
+    await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
+
+    // - Voucher input should be visible in CPF mode.
+    expect(screen.getByLabelText('Voucher code')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Validate' })).toBeInTheDocument();
+
+    // - Subscribe button should be visible in CPF mode.
+    expect(screen.getByRole('button', { name: 'Subscribe' })).toBeInTheDocument();
+  });
 });

package/js/components/SaleTunnel/index.full-process-b2b.spec.tsx

@@ -210,11 +210,11 @@ describe('SaleTunnel', () => {
     await user.type($lastName, 'Doe');
     await user.type($firstName, 'John');
     await user.type($role, 'HR');
-    await user.type($email, 'john.doe@fun-mooc.com');
+    await user.type($email, 'john.doe+admin@fun-mooc.com');
     await user.type($phone, '+338203920103');
 
     expect($lastName).toHaveValue('Doe');
-    expect($email).toHaveValue('john.doe@fun-mooc.com');
+    expect($email).toHaveValue('john.doe+admin@fun-mooc.com');
 
     // Signatory step
     await user.click(screen.getByRole('button', { name: 'Next' }));
@@ -227,7 +227,7 @@ describe('SaleTunnel', () => {
     await user.type($signatoryLastName, 'Doe');
     await user.type($signatoryFirstName, 'John');
     await user.type($signatoryRole, 'CEO');
-    await user.type($signatoryEmail, 'john.doe@fun-mooc.com');
+    await user.type($signatoryEmail, 'john.doe+ceo@fun-mooc.com');
     await user.type($signatoryPhone, '+338203920103');
 
     // Participants step
@@ -298,12 +298,12 @@ describe('SaleTunnel', () => {
       administrative_lastname: 'Doe',
       administrative_firstname: 'John',
       administrative_profession: 'HR',
-      administrative_email: 'john.doe@fun-mooc.com',
+      administrative_email: 'john.doe+admin@fun-mooc.com',
       administrative_telephone: '+338203920103',
       signatory_lastname: 'Doe',
       signatory_firstname: 'John',
       signatory_profession: 'CEO',
-      signatory_email: 'john.doe@fun-mooc.com',
+      signatory_email: 'john.doe+ceo@fun-mooc.com',
       signatory_telephone: '+338203920103',
       nb_seats: '13',
       payment_method: PaymentMethod.PURCHASE_ORDER,

package/js/components/SaleTunnel/index.full-process-b2c.spec.tsx

@@ -404,7 +404,7 @@ describe('SaleTunnel', () => {
     await screen.findByTestId('generic-sale-tunnel-success-step');
     screen.getByText('Subscription confirmed!');
     screen.getByText(
-      /your order has been successfully registered\.you will be able to start your training once the first installment will be paid\./i,
+      /you’ll be able to start your training once the first installment has been paid, or once access opens if no payment is required\./i,
     );
     screen.getByRole('link', { name: 'Close' });
 

package/js/components/SaleTunnel/index.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react-webpack5';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import {
   CertificateProductFactory,

package/js/components/Spinner/index.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react-webpack5';
 import { Spinner } from './index';
 
 export default {

package/js/components/Tabs/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { RouterWrapper } from 'utils/test/wrappers/RouterWrapper';
 import Tabs from './index';

package/js/components/Tabs/index.tsx

@@ -45,7 +45,8 @@ const Tab = ({
   return (
     <div className="tabs__tab">
       <Button
-        color="tertiary-text"
+        color="brand"
+        variant="tertiary"
         onClick={handleOnClick}
         className={classNames('c__button--tab', {
           'c__button--active': isActive,

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -91,7 +91,8 @@ const TeacherDashboardCourseList = ({
           onClick={() => loadMore()}
           disabled={isLoadingMore}
           ref={loadMoreButtonRef}
-          color="tertiary"
+          color="brand"
+          variant="tertiary"
         >
           <FormattedMessage {...messages.loadMore} />
         </Button>

package/js/hooks/useAddressesManagement.tsx

@@ -1,5 +1,4 @@
 import { defineMessages, useIntl } from 'react-intl';
-import { MutateOptions } from '@tanstack/react-query';
 import { useAddresses } from 'hooks/useAddresses';
 import * as Joanie from 'types/Joanie';
 import { confirm } from 'utils/indirection/window';
@@ -58,7 +57,10 @@ export function useAddressesManagement() {
    * @param {Joanie.Address} address
    * @param {AddressesMutateOptions} options
    */
-  const remove = (address: Joanie.Address, options?: MutateOptions) => {
+  const remove = (
+    address: Joanie.Address,
+    options?: Parameters<typeof addresses.methods.delete>[1],
+  ) => {
     if (address.is_main) {
       addresses.methods.setError(intl.formatMessage(messages.errorCannotRemoveMain));
       return;

package/js/hooks/useBatchOrder/index.tsx

@@ -1,7 +1,13 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { ResourcesQuery, useResource, useResources, UseResourcesProps } from 'hooks/useResources';
-import { API, BatchOrderQueryFilters, BatchOrderRead } from 'types/Joanie';
+import {
+  API,
+  BatchOrderQueryFilters,
+  BatchOrderRead,
+  BatchOrderSeat,
+  BatchOrderSeatsQueryFilters,
+} from 'types/Joanie';
 
 const messages = defineMessages({
   errorCreate: {
@@ -34,3 +40,17 @@ export const useBatchOrdersActions = () => {
     submitForPayment,
   };
 };
+
+const seatsProps: UseResourcesProps<
+  BatchOrderSeat,
+  BatchOrderSeatsQueryFilters,
+  API['user']['batchOrders']['seats']
+> = {
+  queryKey: ['batchOrders', 'seats'],
+  apiInterface: () => useJoanieApi().user.batchOrders.seats,
+  session: true,
+};
+
+export const useBatchOrderSeats = useResources<BatchOrderSeat, BatchOrderSeatsQueryFilters>(
+  seatsProps,
+);

package/js/hooks/useCreditCards/index.ts

@@ -1,6 +1,5 @@
 import { defineMessages, useIntl } from 'react-intl';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { MutateOptions } from '@tanstack/query-core';
 import { API, CreditCard } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { useSessionMutation } from 'utils/react-query/useSessionMutation';
@@ -84,10 +83,13 @@ const useCreditCardResources =
      * If the error is a 409, it means the credit card is used to pay at least one order
      * and the user should be informed about that.
      */
-    const deleteMutateAsync = async (creditCard: CreditCard, options?: MutateOptions) => {
+    const deleteMutateAsync = async (
+      creditCard: CreditCard,
+      options?: Parameters<typeof custom.methods.delete>[1],
+    ) => {
       return custom.methods.delete(creditCard.id, {
         ...options,
-        onError: (error: HttpError, variables, context) => {
+        onError: (error: HttpError, variables, context, mutationContext) => {
           if (error.code === HttpStatusCode.CONFLICT) {
             custom.methods.setError(
               intl.formatMessage(messages.errorCannotDelete, {
@@ -97,7 +99,7 @@ const useCreditCardResources =
           } else {
             custom.methods.setError(intl.formatMessage(messages.errorDelete));
           }
-          options?.onError?.(error, variables, context);
+          options?.onError?.(error, variables, context, mutationContext);
         },
       });
     };

package/js/hooks/useDashboardAddressForm.tsx

@@ -1,5 +1,5 @@
-import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
-import { FormProvider, useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import countries from 'i18n-iso-countries';
@@ -60,7 +60,7 @@ export const useDashboardAddressForm = (address?: Address) => {
     defaultValues: address || defaultValues,
     mode: 'onBlur',
     reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<AddressFormValues>,
   });
   const { register, handleSubmit, formState } = form;
 

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

@@ -0,0 +1,136 @@
+import { faker } from '@faker-js/faker';
+import fetchMock from 'fetch-mock';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+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 { useDownloadAgreement } from 'hooks/useDownloadAgreement/index';
+import { handle } from 'utils/errors/handle';
+import { SessionProvider } from 'contexts/SessionContext';
+import { Deferred } from 'utils/test/deferred';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+
+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('useDownloadAgreement', () => {
+  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 agreement PDF', async () => {
+    const organization = OrganizationFactory().one();
+    const agreementId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/organizations/${organization.id}/agreements/${agreementId}/download/`;
+    const deferred = new Deferred();
+    fetchMock.get(DOWNLOAD_URL, deferred.promise);
+
+    const { result } = renderHook(() => useDownloadAgreement(), {
+      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);
+    expect(result.current.loading).toBe(false);
+
+    act(() => {
+      result.current.download(organization.id, agreementId);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['%PDF-1.4']),
+      headers: {
+        'Content-Disposition': 'attachment; filename="Convention_de_formation.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);
+      expect(result.current.loading).toBe(false);
+    });
+
+    fireEvent.blur(window);
+    // eslint-disable-next-line compat/compat
+    expect(URL.revokeObjectURL).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles an error if agreement download request fails', async () => {
+    const organization = OrganizationFactory().one();
+    const agreementId = faker.string.uuid();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/organizations/${organization.id}/agreements/${agreementId}/download/`;
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
+
+    const { result } = renderHook(() => useDownloadAgreement(), {
+      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);
+
+    act(() => {
+      result.current.download(organization.id, agreementId);
+    });
+
+    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);
+      expect(result.current.loading).toBe(false);
+    });
+  });
+});

package/js/hooks/useDownloadAgreement/index.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
+
+export const useDownloadAgreement = () => {
+  const [loading, setLoading] = useState(false);
+  const API = useJoanieApi();
+
+  return {
+    download: async (organizationId: string, agreementId: string) => {
+      setLoading(true);
+      try {
+        await browserDownloadFromBlob(() =>
+          API.organizations.agreements.download({
+            organization_id: organizationId,
+            id: agreementId,
+          }),
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    loading,
+  };
+};