richie-education 3.3.2-dev6 → 3.4.1-dev13

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

@@ -0,0 +1,132 @@
+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 { useDownloadBatchOrderSeats } from 'hooks/useDownloadBatchOrderSeats/index';
+import { handle } from 'utils/errors/handle';
+import { SessionProvider } from 'contexts/SessionContext';
+import { Deferred } from 'utils/test/deferred';
+import { BatchOrderReadFactory } 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('useDownloadBatchOrderSeats', () => {
+  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 batch order seats CSV', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/batch-orders/${batchOrder.id}/seats-export/`;
+    const deferred = new Deferred();
+    fetchMock.get(DOWNLOAD_URL, deferred.promise);
+
+    const { result } = renderHook(() => useDownloadBatchOrderSeats(), {
+      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(batchOrder.id);
+    });
+    expect(result.current.loading).toBe(true);
+
+    deferred.resolve({
+      status: HttpStatusCode.OK,
+      body: new Blob(['last_name,first_name,email']),
+      headers: {
+        'Content-Type': 'text/csv',
+      },
+    });
+
+    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 seats export request fails', async () => {
+    const batchOrder = BatchOrderReadFactory().one();
+    const DOWNLOAD_URL = `https://joanie.test/api/v1.0/batch-orders/${batchOrder.id}/seats-export/`;
+    fetchMock.get(DOWNLOAD_URL, HttpStatusCode.UNAUTHORIZED);
+
+    const { result } = renderHook(() => useDownloadBatchOrderSeats(), {
+      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(batchOrder.id);
+    });
+
+    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/useDownloadBatchOrderSeats/index.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { browserDownloadFromBlob } from 'utils/download';
+
+export const useDownloadBatchOrderSeats = () => {
+  const [loading, setLoading] = useState(false);
+  const API = useJoanieApi();
+
+  return {
+    download: async (batchOrderId: string, filename?: string) => {
+      setLoading(true);
+      try {
+        await browserDownloadFromBlob(
+          () => API.user.batchOrders.seats_export(batchOrderId),
+          false,
+          filename,
+        );
+      } finally {
+        setLoading(false);
+      }
+    },
+    loading,
+  };
+};

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/DashboardBatchOrderLayout/index.spec.tsx

@@ -2,7 +2,11 @@ import { findByRole, render, screen, waitFor } from '@testing-library/react';
 import { generatePath } from 'react-router';
 import fetchMock from 'fetch-mock';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { BatchOrderReadFactory } from 'utils/test/factories/joanie';
+import {
+  AgreementFactory,
+  BatchOrderReadFactory,
+  BatchOrderSeatFactory,
+} from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { expectUrlMatchLocationDisplayed } from 'utils/test/expectUrlMatchLocationDisplayed';
@@ -49,8 +53,21 @@ describe('<DashboardBatchOrderLayout />', () => {
 
   it('renders sidebar', async () => {
     const batchOrder = BatchOrderReadFactory().one();
-
+    const seats = BatchOrderSeatFactory().many(2);
     fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/seats/?page=1&page_size=10`,
+      {
+        results: seats,
+        count: seats.length,
+        previous: null,
+        next: null,
+      },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${batchOrder.organization.id}/agreements/${batchOrder.contract_id}/`,
+      AgreementFactory().one(),
+    );
 
     render(
       WrapperWithDashboard(

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={