richie-education 3.3.2-dev19 → 3.3.2-dev25

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.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>}

package/js/utils/ProductHelper/index.spec.ts

@@ -248,7 +248,7 @@ describe('ProductHelper', () => {
     it('should throw an error when the product is a certificate and the enrollment is undefined', () => {
       const product = CertificateProductFactory().one();
 
-      expect(() => ProductHelper.hasOpenedTargetCourse(product, undefined)).toThrowError(
+      expect(() => ProductHelper.hasOpenedTargetCourse(product, undefined)).toThrow(
         'Unable to check if the certificate product relies on an opened course run without enrollment.',
       );
     });