richie-education 3.3.2-dev6 → 3.4.1-dev3

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.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/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/useMatchMedia.ts

@@ -36,6 +36,6 @@ const useMatchMedia = (query: string): boolean => {
 };
 
 export const useMatchMediaLg = () =>
-  useMatchMedia(`(max-width: ${tokens.themes.default.theme.breakpoints.lg})`);
+  useMatchMedia(`(max-width: ${tokens.themes.default.globals.breakpoints.lg})`);
 
 export default useMatchMedia;

package/js/hooks/useResources/useResourcesRoot.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQuery, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import { useCallback, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { MutateOptions } from '@tanstack/query-core/src/types';
+import { MutateOptions } from '@tanstack/query-core';
 import { AddParameters, Maybe } from 'types/utils';
 import { HttpError } from 'utils/errors/HttpError';
 import { useSessionQuery } from 'utils/react-query/useSessionQuery';

package/js/hooks/useUnionResource/index.ts

@@ -35,8 +35,12 @@ export interface ResourceUnionPaginationProps {
   perPage?: number;
 }
 
-interface UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>
-  extends ResourceUnionPaginationProps {
+interface UseUnionResourceProps<
+  DataA,
+  DataB,
+  FiltersA,
+  FiltersB,
+> extends ResourceUnionPaginationProps {
   queryAConfig: QueryConfig<DataA, FiltersA>;
   queryBConfig: QueryConfig<DataB, FiltersB>;
   errorGetMessage?: MessageDescriptor;

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

@@ -53,6 +53,7 @@ export const fetchEntity = async <
   // Here we need to mimic the behavior of staleTime, which does not seems to be implemented when using `getQueryData`.
   if (
     state &&
+    state.status === 'success' &&
     state.dataUpdatedAt >= new Date().getTime() - REACT_QUERY_SETTINGS.staleTimes.sessionItems &&
     !state.isInvalidated
   ) {

package/js/pages/DashboardAddressesManagement/DashboardAddressBox.tsx

@@ -47,16 +47,16 @@ export const DashboardAddressBox = ({
         <>
           <div className="dashboard-address-box__buttons">
             {!address.is_main && (
-              <Button color="primary" onClick={() => promote(address)}>
+              <Button color="brand" variant="primary" onClick={() => promote(address)}>
                 <FormattedMessage {...messages.setMain} />
               </Button>
             )}
-            <Button color="primary" onClick={() => edit(address)}>
+            <Button color="brand" variant="primary" onClick={() => edit(address)}>
               <FormattedMessage {...messages.edit} />
             </Button>
           </div>
           {!address.is_main && (
-            <Button color="primary" onClick={() => remove(address)}>
+            <Button color="brand" variant="primary" onClick={() => remove(address)}>
               <FormattedMessage {...messages.delete} />
             </Button>
           )}

package/js/pages/DashboardAddressesManagement/DashboardCreateAddress.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { DashboardCreateAddress } from './DashboardCreateAddress';
 

package/js/pages/DashboardAddressesManagement/DashboardCreateAddress.tsx

@@ -38,7 +38,7 @@ export const DashboardCreateAddress = ({ onSettled }: { onSettled?: Function })
     <DashboardCard
       header={<FormattedMessage {...messages.header} />}
       footer={
-        <Button color="primary" onClick={handleSubmit(onSubmit)}>
+        <Button color="brand" variant="primary" onClick={handleSubmit(onSubmit)}>
           <FormattedMessage {...messages.submit} />
         </Button>
       }

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import { DashboardEditAddress } from './DashboardEditAddress';

package/js/pages/DashboardAddressesManagement/DashboardEditAddress.tsx

@@ -54,12 +54,13 @@ export const DashboardEditAddress = ({ address, onSettled = noop }: DashboardEdi
       header={<FormattedMessage {...messages.header} values={{ title: address.title }} />}
       footer={
         <>
-          <Button color="secondary" onClick={handleSubmit(onSubmit)}>
+          <Button color="brand" variant="secondary" onClick={handleSubmit(onSubmit)}>
             <FormattedMessage {...messages.submit} />
           </Button>
           {!address.is_main && (
             <Button
-              color="secondary"
+              color="brand"
+              variant="secondary"
               onClick={() => {
                 remove(address, {
                   onSuccess: () => onSettled(),

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { DashboardAddressesManagement } from './index';
 

package/js/pages/DashboardAddressesManagement/index.tsx

@@ -86,7 +86,7 @@ export const DashboardAddressesManagement = ({
                 ))}
               </DashboardBox.List>
             )}
-            <Button color="secondary" fullWidth onClick={() => onClickCreate?.()}>
+            <Button color="brand" variant="secondary" fullWidth onClick={() => onClickCreate?.()}>
               <Icon name={IconTypeEnum.PLUS} className="button__icon" />
               <FormattedMessage {...messages.add} />
             </Button>

package/js/pages/DashboardCourses/index.tsx

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

package/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CreditCardFactory } from 'utils/test/factories/joanie';
 import { CreditCard, CreditCardBrand } from 'types/Joanie';
 import { CreditCardBrandLogo } from './CreditCardBrandLogo';

package/js/pages/DashboardCreditCardsManagement/DashboardCreditCardBox.tsx

@@ -68,15 +68,15 @@ export const DashboardCreditCardBox = ({ creditCard, promote, edit, remove }: Pr
         <>
           <div className="dashboard-credit-card__buttons">
             {!creditCard.is_main && (
-              <Button color="primary" onClick={() => promote(creditCard)}>
+              <Button color="brand" variant="primary" onClick={() => promote(creditCard)}>
                 <FormattedMessage {...messages.setMain} />
               </Button>
             )}
-            <Button color="primary" onClick={() => edit(creditCard)}>
+            <Button color="brand" variant="primary" onClick={() => edit(creditCard)}>
               <FormattedMessage {...messages.edit} />
             </Button>
           </div>
-          <Button color="primary" onClick={() => remove(creditCard)}>
+          <Button color="brand" variant="primary" onClick={() => remove(creditCard)}>
             <FormattedMessage {...messages.delete} />
           </Button>
         </>

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { CreditCardFactory } from 'utils/test/factories/joanie';
 import { DashboardEditCreditCard } from './DashboardEditCreditCard';

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.tsx

@@ -159,12 +159,13 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
       header={<FormattedMessage {...messages.header} />}
       footer={
         <>
-          <Button color="secondary" onClick={handleSubmit(onSubmit)}>
+          <Button color="brand" variant="secondary" onClick={handleSubmit(onSubmit)}>
             <FormattedMessage {...messages.submit} />
           </Button>
           {!creditCard.is_main && (
             <Button
-              color="secondary"
+              color="brand"
+              variant="secondary"
               onClick={() =>
                 safeDelete(creditCard, {
                   onSuccess: () => {

package/js/pages/DashboardCreditCardsManagement/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { DashboardCreditCardsManagement } from '.';
 

package/js/pages/DashboardOpenEdxProfile/index.stories.tsx

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

package/js/pages/TeacherDashboardContractsLayout/components/BulkDownloadContractButton/index.tsx

@@ -49,7 +49,8 @@ const BulkDownloadContractButton = ({
     return (
       <Button
         disabled={true}
-        color="tertiary"
+        color="brand"
+        variant="tertiary"
         size="small"
         icon={<div className="spinner spinner--small" />}
       >
@@ -62,7 +63,8 @@ const BulkDownloadContractButton = ({
     <Button
       onClick={downloadContractArchive}
       disabled={status === ContractDownloadStatus.INITIALIZING}
-      color={status === ContractDownloadStatus.READY ? 'primary' : 'tertiary'}
+      color="brand"
+      variant={status === ContractDownloadStatus.READY ? 'primary' : 'tertiary'}
       size="small"
       icon={<span className="material-icons">download</span>}
     >

package/js/pages/TeacherDashboardContractsLayout/components/SignOrganizationContractButton/index.tsx

@@ -32,7 +32,8 @@ const SignOrganizationContractButton = ({
       {hasContractToSign && (
         <Button
           size="small"
-          color="primary"
+          color="brand"
+          variant="primary"
           onClick={() => setContractFrameOpened(true)}
           disabled={contractFrameOpened}
           icon={

package/js/pages/TeacherDashboardContractsLayout/hooks/useCheckContractArchiveExists/index.spec.tsx

@@ -116,9 +116,9 @@ describe.each([
     });
 
     await waitFor(() => {
-      expect(result.current.isPolling).toBe(false);
+      expect(result.current.isContractArchiveExists).toBe(true);
     });
-    expect(result.current.isContractArchiveExists).toBe(true);
+    expect(result.current.isPolling).toBe(false);
   });
 
   it('should do nothing when enable is false', () => {
@@ -160,8 +160,8 @@ describe.each([
     mockCheckArchive.mockResolvedValue(true);
     await waitFor(() => {
       expect(mockCheckArchive).toHaveBeenCalledTimes(2);
+      expect(result.current.isContractArchiveExists).toBe(true);
+      expect(result.current.isPolling).toBe(false);
     });
-    expect(result.current.isPolling).toBe(false);
-    expect(result.current.isContractArchiveExists).toBe(true);
   });
 });

package/js/pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/index.spec.tsx

@@ -232,6 +232,7 @@ describe.each([
         const contractArchiveId = faker.string.uuid();
         storeContractArchiveId({ ...localStorageArchiveFilters, contractArchiveId });
         mockCheckArchive.mockResolvedValue(true);
+        mockGetArchive.mockResolvedValue('fake-content');
 
         const { result } = renderHook(
           () => useDownloadContractArchive(localStorageArchiveFilters),
@@ -246,8 +247,8 @@ describe.each([
         });
         expect(mockCheckArchive).toHaveBeenCalledTimes(1);
 
-        act(() => {
-          result.current.downloadContractArchive();
+        await act(async () => {
+          await result.current.downloadContractArchive();
         });
 
         await waitFor(() => {
@@ -255,11 +256,8 @@ describe.each([
         });
 
         expect(mockCheckArchive).toHaveBeenCalledTimes(1);
-        // backend is called to download the archive
-        expect(mockGetArchive).toHaveBeenCalledTimes(1);
-
-        // but not to generate the archive
         expect(mockCreateArchive).not.toHaveBeenCalled();
+        expect(mockGetArchive).toHaveBeenCalledTimes(1);
       });
 
       it("doDownloadArchive should call 'createArchive' if no contractArchiveId is stored", async () => {
@@ -271,9 +269,11 @@ describe.each([
         );
 
         mockCheckArchive.mockResolvedValue(true);
+
         mockCreateArchive.mockResolvedValue(faker.string.uuid());
-        act(() => {
-          result.current.downloadContractArchive();
+
+        await act(async () => {
+          await result.current.downloadContractArchive();
         });
 
         await waitFor(() => {
@@ -282,7 +282,6 @@ describe.each([
 
         expect(mockCreateArchive).toHaveBeenCalledTimes(1);
         expect(mockCheckArchive).toHaveBeenCalledTimes(1);
-        expect(mockGetArchive).toHaveBeenCalledTimes(1);
       });
     });
 

package/js/pages/TeacherDashboardContractsLayout/hooks/useDownloadContractArchive/index.tsx

@@ -157,10 +157,21 @@ const useDownloadContractArchive = ({
   // this effect will trigger the download
   // if it have been previously requested by the user
   useEffect(() => {
-    if (isDownloadRequest && isContractArchiveExists) {
-      downloadContractArchive();
+    if (isDownloadRequest && isContractArchiveExists && contractArchiveId !== null) {
+      (async () => {
+        await getArchive(contractArchiveId);
+        setIsDownloadRequest(false);
+        setContractArchiveId(null);
+        unstoreContractArchiveId(localstorageArchiveFilters);
+      })();
     }
-  }, [isDownloadRequest, isContractArchiveExists]);
+  }, [
+    isDownloadRequest,
+    isContractArchiveExists,
+    contractArchiveId,
+    localstorageArchiveFilters,
+    getArchive,
+  ]);
 
   return {
     status: contractDownloadStatus,

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.tsx

@@ -82,7 +82,12 @@ const CourseLearnerDataGrid = ({
       headerName: intl.formatMessage(messages.columnActions),
       renderCell: (params: { row: Row }) => {
         return (
-          <Button href={`mailto:${params.row.owner__email}`} size="small" color="secondary">
+          <Button
+            href={`mailto:${params.row.owner__email}`}
+            size="small"
+            color="brand"
+            variant="secondary"
+          >
             <FormattedMessage {...messages.contactButton} />
           </Button>
         );

package/js/pages/TeacherDashboardCourseLoader/CourseRunList/utils.tsx

@@ -69,7 +69,8 @@ export const buildCourseRunData = (intl: IntlShape, courseRuns: CourseRun[]) =>
       <CourseRunListCell variant={CourseRunListCell.ALIGN_RIGHT}>
         <Button
           href={courseRun.resource_link}
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           icon={<Icon name={IconTypeEnum.LOGOUT_SQUARE} size="small" />}
         >

package/js/pages/TeacherDashboardOrganizationAgreements/BulkAgreementContractButton.tsx

@@ -50,7 +50,8 @@ const BulkDownloadAgreementButton = ({
     return (
       <Button
         disabled={true}
-        color="tertiary"
+        color="brand"
+        variant="tertiary"
         size="small"
         icon={<div className="spinner spinner--small" />}
       >
@@ -63,7 +64,8 @@ const BulkDownloadAgreementButton = ({
     <Button
       onClick={downloadContractArchive}
       disabled={status === ContractDownloadStatus.INITIALIZING}
-      color={status === ContractDownloadStatus.READY ? 'primary' : 'tertiary'}
+      color="brand"
+      variant={status === ContractDownloadStatus.READY ? 'primary' : 'tertiary'}
       size="small"
       icon={<span className="material-icons">download</span>}
     >

package/js/pages/TeacherDashboardOrganizationAgreements/SignOrganizationAgreementButton.tsx

@@ -32,7 +32,8 @@ const SignOrganizationAgreementButton = ({
       {hasAgreementToSign && (
         <Button
           size="small"
-          color="primary"
+          color="brand"
+          variant="primary"
           onClick={() => setAgreementFrameOpened(true)}
           disabled={agreementFrameOpened}
           icon={

package/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -37,7 +37,7 @@ describe('full process for the organization quotes dashboard', () => {
 
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: true,
+        can_manage_batch_order_agreement: true,
         confirm_bank_transfer: true,
         confirm_quote: true,
         download_quote: true,
@@ -206,7 +206,7 @@ describe('full process for the organization quotes dashboard', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: true,
+        can_manage_batch_order_agreement: true,
         confirm_bank_transfer: true,
         confirm_quote: true,
         download_quote: true,

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

@@ -165,7 +165,7 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: false,
+        can_manage_batch_order_agreement: false,
         confirm_bank_transfer: false,
         confirm_quote: false,
         download_quote: true,

package/js/pages/TeacherDashboardOrganizationQuotes/index.tsx

@@ -371,7 +371,8 @@ const TeacherDashboardOrganizationQuotes = () => {
       <div>
         <Button
           size="small"
-          color="secondary"
+          color="brand"
+          variant="secondary"
           className="mr-2"
           onClick={() => handleDownloadQuote(quote.id)}
           icon={<span className="material-icons">download</span>}
@@ -415,7 +416,7 @@ const TeacherDashboardOrganizationQuotes = () => {
     const submitForSignatureButton = (
       <Button
         size="small"
-        disabled={batchOrder.contract_submitted || !abilities?.can_submit_for_signature_batch_order}
+        disabled={batchOrder.contract_submitted || !abilities?.can_manage_batch_order_agreement}
         onClick={() =>
           !batchOrder.contract_submitted && handleSubmitForSignature(quote.batch_order.id)
         }