richie-education 3.3.2-dev16 → 3.3.2-dev25

package/js/components/AddressesManagement/AddressForm/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 { AddressFactory } from 'utils/test/factories/joanie';
 import AddressForm from '.';

package/js/components/AddressesManagement/AddressForm/index.tsx

@@ -1,6 +1,6 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Fragment, useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Button, Checkbox } from '@openfun/cunningham-react';
 import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
@@ -39,7 +39,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
     defaultValues: address || defaultValues,
     mode: 'onBlur',
     reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<AddressFormValues>,
   });
   const { register, handleSubmit, reset, formState } = form;
 
@@ -140,7 +140,8 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           {address ? (
             <Fragment>
               <Button
-                color="tertiary"
+                color="brand"
+                variant="tertiary"
                 onClick={handleCancel}
                 title={intl.formatMessage(messages.cancelTitleButton)}
               >

package/js/components/AddressesManagement/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 { RichieContextFactory } from 'utils/test/factories/richie';
 import AddressesManagement from '.';

package/js/components/AddressesManagement/index.tsx

@@ -1,4 +1,4 @@
-import { Children, useEffect, useState, RefAttributes } from 'react';
+import { Children, useEffect, useState, Ref } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import AddressForm, { type AddressFormValues } from 'components/AddressesManagement/AddressForm';
@@ -105,9 +105,10 @@ export const messages = defineMessages({
   },
 });
 
-interface AddressesManagementProps extends RefAttributes<HTMLDivElement> {
+interface AddressesManagementProps {
   handleClose: () => void;
   selectAddress: (address: Joanie.Address) => void;
+  ref?: Ref<HTMLDivElement>;
 }
 
 const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManagementProps) => {
@@ -191,7 +192,8 @@ const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManag
     <div className="AddressesManagement" ref={ref}>
       <Button
         className="AddressesManagement__closeButton"
-        color="tertiary"
+        color="brand"
+        variant="tertiary"
         size="small"
         onClick={handleClose}
       >

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

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

package/js/components/Badge/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { PropsWithChildren } from 'react/ts5.0';
+import { PropsWithChildren } from 'react';
 
 type BadgeProps = PropsWithChildren<{
   color?: 'primary' | 'secondary' | 'tertiary';

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

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

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CourseLightFactory, RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseGlimpse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 import { CourseCertificateOffer, CourseOffer } from 'types/Course';

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { RichieContextFactory, CourseLightFactory } from 'utils/test/factories/richie';
 import { CourseGlimpseList, getCourseGlimpseListProps } from '.';
 

package/js/components/CreditCardSelector/index.tsx

@@ -111,7 +111,8 @@ export const CreditCardSelector = ({
             {allowEdit && creditCards?.length > 0 && (
               <Button
                 icon={<span className="material-icons">edit</span>}
-                color="tertiary-text"
+                color="brand"
+                variant="tertiary"
                 size="medium"
                 onClick={modal.open}
                 aria-label={intl.formatMessage(messages.editCreditCardAriaLabel)}
@@ -122,7 +123,8 @@ export const CreditCardSelector = ({
             <Button
               onClick={() => setCreditCard(undefined)}
               size="small"
-              color="secondary"
+              color="brand"
+              variant="secondary"
               className="mt-t"
               fullWidth={isMobile}
             >
@@ -217,7 +219,13 @@ const CreditCardSelectorModal = ({
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.modalTitle)}
       actions={
-        <Button color="primary" size="small" fullWidth={true} onClick={() => onChange(selected)}>
+        <Button
+          color="brand"
+          variant="primary"
+          size="small"
+          fullWidth={true}
+          onClick={() => onChange(selected)}
+        >
           <FormattedMessage {...messages.modalTitle} />
         </Button>
       }

package/js/components/DownloadCertificateButton/index.tsx

@@ -38,7 +38,8 @@ const DownloadCertificateButton = ({
     <Button
       className={className}
       size="small"
-      color="secondary"
+      color="brand"
+      variant="secondary"
       disabled={loading}
       onClick={onDownloadClick}
     >

package/js/components/DownloadContractButton/index.tsx

@@ -39,7 +39,13 @@ const DownloadContractButton = ({ contract, className }: DownloadContractButtonP
   };
 
   return (
-    <Button size="small" className={className} color="secondary" onClick={downloadContract}>
+    <Button
+      size="small"
+      className={className}
+      color="brand"
+      variant="secondary"
+      onClick={downloadContract}
+    >
       <FormattedMessage {...messages.contractDownloadActionLabel} />
     </Button>
   );

package/js/components/Form/Form/index.tsx

@@ -1,8 +1,10 @@
 import c from 'classnames';
 import { PropsWithChildren } from 'react';
 
-interface FormProps
-  extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {}
+interface FormProps extends React.DetailedHTMLProps<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  HTMLFormElement
+> {}
 
 const Form = ({ children, onSubmit, className, name, noValidate = true }: FormProps) => {
   return (

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { PropsWithChildren, useState, useRef, CSSProperties } from 'react';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Icon, IconTypeEnum } from './index';
@@ -69,6 +69,7 @@ const IconContainer = ({ name, enumKey }: IconContainerProps) => {
   };
 
   const clipboardCopy = () => {
+    // eslint-disable-next-line compat/compat
     navigator.clipboard.writeText(`${ENUM_NAME}.${enumKey}`);
     setShowTooltip(true);
     if (timeoutRef.current) clearTimeout(timeoutRef.current);

package/js/components/Modal/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 { Modal } from './index';
 

package/js/components/Modal/index.tsx

@@ -78,7 +78,8 @@ export const Modal = ({
             className="modal__closeButton"
             onClick={(e) => props.onRequestClose?.(e)}
             title={intl.formatMessage(messages.closeDialog)}
-            color="tertiary"
+            color="brand"
+            variant="tertiary"
             size="small"
           >
             <Icon name={IconTypeEnum.ROUND_CLOSE} />

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

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

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -1,6 +1,6 @@
 import { ButtonElement, Input, Alert, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useMemo, useRef } from 'react';
@@ -78,7 +78,7 @@ const OpenEdxFullNameForm = () => {
     defaultValues,
     mode: 'onBlur',
     reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<OpenEdxFullNameFormValues>,
   });
 
   const { getValues, register, handleSubmit, reset, formState } = form;

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

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

package/js/components/RegisteredAddress/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 { AddressFactory } from 'utils/test/factories/joanie';
 import RegisteredAddress from '.';

package/js/components/RegisteredAddress/index.tsx

@@ -91,7 +91,8 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
         </Button>
         <Button
           aria-label={intl.formatMessage(messages.editButtonLabel, { title: address.title })}
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           onClick={() => edit(address)}
         >
@@ -101,7 +102,8 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
           aria-label={intl.formatMessage(messages.deleteButtonLabel, {
             title: address.title,
           })}
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           disabled={address.is_main}
           onClick={() => remove(address)}

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

@@ -52,7 +52,7 @@ export const CreateAddressFormModal = (props: AddressFormModalProps) => {
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.title)}
       actions={
-        <Button color="primary" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button color="brand" variant="primary" size="small" onClick={handleSubmit(onSubmit)}>
           <FormattedMessage {...messages.submit} />
         </Button>
       }

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

@@ -49,7 +49,7 @@ export const EditAddressFormModal = ({
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.title)}
       actions={
-        <Button color="primary" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button color="brand" variant="primary" size="small" onClick={handleSubmit(onSubmit)}>
           <FormattedMessage {...messages.save} />
         </Button>
       }

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';
@@ -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

@@ -443,7 +443,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>
@@ -500,7 +506,7 @@ const CpfPayment = ({ deepLink }: { deepLink: string }) => {
         <FormattedMessage {...messages.cpfDescription} />
       </p>
       <Button
-        color="primary"
+        color="brand"
         fullWidth={true}
         href={deepLink}
         target="_blank"

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';