richie-education 3.3.2-dev6 → 3.4.1-dev13

package/i18n/locales/ru-RU.json

@@ -1911,6 +1911,14 @@
     "description": "Validate button for the credit card modal",
     "message": "Validate"
   },
+  "components.SaleTunnel.Information.cpf.buttonLabel": {
+    "description": "Label for the button redirecting to Mon Compte Formation",
+    "message": "Go to Mon Compte Formation"
+  },
+  "components.SaleTunnel.Information.cpf.description": {
+    "description": "Explanatory text for the CPF payment option",
+    "message": "Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation."
+  },
   "components.SaleTunnel.Information.description": {
     "description": "Description of the information section",
     "message": "This information will be used for billing"
@@ -1951,6 +1959,18 @@
     "description": "Message displayed representing the payment schedule when the order is free.",
     "message": "No payment required. This order is fully covered."
   },
+  "components.SaleTunnel.Information.paymentMode.classic": {
+    "description": "Label for the classic card payment option",
+    "message": "Credit card payment"
+  },
+  "components.SaleTunnel.Information.paymentMode.cpf": {
+    "description": "Label for the CPF (Mon Compte Formation) payment option",
+    "message": "My Training Account (CPF)"
+  },
+  "components.SaleTunnel.Information.paymentMode.title": {
+    "description": "Title for the payment mode selection section",
+    "message": "Payment method"
+  },
   "components.SaleTunnel.Information.paymentSchedule": {
     "description": "Title for the payment schedule section",
     "message": "Payment schedule"

package/i18n/locales/vi-VN.json

@@ -1911,6 +1911,14 @@
     "description": "Validate button for the credit card modal",
     "message": "Validate"
   },
+  "components.SaleTunnel.Information.cpf.buttonLabel": {
+    "description": "Label for the button redirecting to Mon Compte Formation",
+    "message": "Go to Mon Compte Formation"
+  },
+  "components.SaleTunnel.Information.cpf.description": {
+    "description": "Explanatory text for the CPF payment option",
+    "message": "Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation."
+  },
   "components.SaleTunnel.Information.description": {
     "description": "Description of the information section",
     "message": "This information will be used for billing"
@@ -1951,6 +1959,18 @@
     "description": "Message displayed representing the payment schedule when the order is free.",
     "message": "No payment required. This order is fully covered."
   },
+  "components.SaleTunnel.Information.paymentMode.classic": {
+    "description": "Label for the classic card payment option",
+    "message": "Credit card payment"
+  },
+  "components.SaleTunnel.Information.paymentMode.cpf": {
+    "description": "Label for the CPF (Mon Compte Formation) payment option",
+    "message": "My Training Account (CPF)"
+  },
+  "components.SaleTunnel.Information.paymentMode.title": {
+    "description": "Title for the payment mode selection section",
+    "message": "Payment method"
+  },
   "components.SaleTunnel.Information.paymentSchedule": {
     "description": "Title for the payment schedule section",
     "message": "Payment schedule"

package/jest.config.js

@@ -17,6 +17,10 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!(' +
       'react-intl' +
+      '|@formatjs' +
+      '|intl-messageformat' +
+      '|@tanstack' +
+      '|uuid' +
       '|lodash-es' +
       '|@hookform/resolvers' +
       '|query-string' +
@@ -25,6 +29,7 @@ module.exports = {
       '|filter-obj' +
       '|@openfun/cunningham-react' +
       '|keycloak-js' +
+      '|@faker-js/faker' +
       ')/)',
   ],
   globals: {

package/js/api/joanie.ts

@@ -107,6 +107,10 @@ export const getRoutes = () => {
         submit_for_payment: {
           create: `${baseUrl}/batch-orders/:id/submit-for-payment/`,
         },
+        seats: {
+          get: `${baseUrl}/batch-orders/:batch_order_id/seats/`,
+        },
+        seats_export: `${baseUrl}/batch-orders/:id/seats-export/`,
       },
       certificates: {
         download: `${baseUrl}/certificates/:id/download/`,
@@ -161,6 +165,7 @@ export const getRoutes = () => {
       },
       agreements: {
         get: `${baseUrl}/organizations/:organization_id/agreements/:id/`,
+        download: `${baseUrl}/organizations/:organization_id/agreements/:id/download/`,
       },
     },
     courses: {
@@ -354,6 +359,17 @@ const API = (): Joanie.API => {
             ).then(checkStatus);
           },
         },
+        seats: {
+          get: async (filters?: Joanie.BatchOrderSeatsQueryFilters) => {
+            return fetchWithJWT(buildApiUrl(ROUTES.user.batchOrders.seats.get, filters)).then(
+              checkStatus,
+            );
+          },
+        },
+        seats_export: async (id: string): Promise<File> =>
+          fetchWithJWT(ROUTES.user.batchOrders.seats_export.replace(':id', id))
+            .then(checkStatus)
+            .then(getFileFromResponse),
       },
       enrollments: {
         create: async (payload) =>
@@ -545,6 +561,10 @@ const API = (): Joanie.API => {
             method: 'GET',
           }).then(checkStatus);
         },
+        download: async (filters: { organization_id: string; id: string }): Promise<File> =>
+          fetchWithJWT(buildApiUrl(ROUTES.organizations.agreements.download, filters))
+            .then(checkStatus)
+            .then(getFileFromResponse),
       },
     },
     courses: {

package/js/api/utils.ts

@@ -16,11 +16,12 @@ export async function getFileFromResponse(response: Response): Promise<File> {
 }
 
 export function getResponseBody(response: Response) {
-  if (response.headers.get('Content-Type') === 'application/json') {
+  const contentType = (response.headers.get('Content-Type') || '').split(';')[0].trim();
+  if (contentType === 'application/json') {
     return response.json();
   }
-  const fileType = ['application/pdf', 'application/zip'];
-  if (fileType.includes(response.headers.get('Content-Type') || '')) {
+  const fileType = ['application/pdf', 'application/zip', 'text/csv'];
+  if (fileType.includes(contentType)) {
     return new Promise((resolve) => resolve(response));
   }
   return response.text();

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/_styles.scss

@@ -15,8 +15,8 @@
         text-align: left;
         font-size: rem-calc(12px);
         color: r-theme-val(credit-card-selector, title-color);
-        font-weight: var(--c--theme--font--weights--bold);
-        font-family: var(--c--theme--font--families--accent);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-family: var(--c--globals--font--families--accent);
       }
 
       &__meta {

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

@@ -0,0 +1,51 @@
+import { useId } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useDownloadAgreement } from 'hooks/useDownloadAgreement';
+
+const messages = defineMessages({
+  download: {
+    defaultMessage: 'Download agreement',
+    description: 'Label for the button to download a signed agreement PDF',
+    id: 'components.DownloadAgreementButton.download',
+  },
+  generating: {
+    defaultMessage: 'Downloading...',
+    description: 'Accessible label displayed while agreement PDF is being downloaded.',
+    id: 'components.DownloadAgreementButton.generating',
+  },
+});
+
+interface DownloadAgreementButtonProps {
+  organizationId: string;
+  agreementId: string;
+}
+
+const DownloadAgreementButton = ({ organizationId, agreementId }: DownloadAgreementButtonProps) => {
+  const { download, loading } = useDownloadAgreement();
+  const labelId = useId();
+
+  return (
+    <Button
+      size="small"
+      color="brand"
+      variant="primary"
+      className="dashboard-item__action-button"
+      disabled={loading}
+      onClick={() => download(organizationId, agreementId)}
+    >
+      {loading ? (
+        <Spinner theme="primary" aria-labelledby={labelId}>
+          <span id={labelId}>
+            <FormattedMessage {...messages.generating} />
+          </span>
+        </Spinner>
+      ) : (
+        <FormattedMessage {...messages.download} />
+      )}
+    </Button>
+  );
+};
+
+export default DownloadAgreementButton;

package/js/components/DownloadBatchOrderSeatsButton/index.spec.tsx

@@ -0,0 +1,46 @@
+import { buildFilename, sanitizeForFilename } from '.';
+
+describe('sanitizeForFilename', () => {
+  it('replaces spaces with underscores', () => {
+    expect(sanitizeForFilename('Formation React')).toBe('Formation_React');
+  });
+
+  it('removes diacritics', () => {
+    expect(sanitizeForFilename('Développement web')).toBe('Developpement_web');
+  });
+
+  it('removes special characters', () => {
+    expect(sanitizeForFilename('C++ / Python')).toBe('C_Python');
+  });
+
+  it('preserves hyphens', () => {
+    expect(sanitizeForFilename('Formation React - Advanced')).toBe('Formation_React_-_Advanced');
+  });
+
+  it('trims leading and trailing spaces', () => {
+    expect(sanitizeForFilename('  Formation  ')).toBe('Formation');
+  });
+});
+
+describe('buildFilename', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date('2026-04-15T09:30:00Z'));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('builds the expected filename', () => {
+    expect(buildFilename('seats', 'Formation React')).toBe(
+      'seats_Formation_React_2026-04-15_09-30.csv',
+    );
+  });
+
+  it('sanitizes the product title in the filename', () => {
+    expect(buildFilename('seats', 'Développement web avancé')).toBe(
+      'seats_Developpement_web_avance_2026-04-15_09-30.csv',
+    );
+  });
+});

package/js/components/DownloadBatchOrderSeatsButton/index.tsx

@@ -0,0 +1,80 @@
+import { useId } from 'react';
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Spinner } from 'components/Spinner';
+import { useDownloadBatchOrderSeats } from 'hooks/useDownloadBatchOrderSeats';
+
+const messages = defineMessages({
+  download: {
+    defaultMessage: 'Export CSV',
+    description: 'Label for the button to export batch order seats as CSV',
+    id: 'components.DownloadBatchOrderSeatsButton.download',
+  },
+  generating: {
+    defaultMessage: 'Generating export...',
+    description: 'Accessible label displayed while CSV export is being generated.',
+    id: 'components.DownloadBatchOrderSeatsButton.generating',
+  },
+  seats: {
+    defaultMessage: 'Seats',
+    description: 'Text displayed for seats value in batch order',
+    id: 'batchOrder.seats',
+  },
+});
+
+export const sanitizeForFilename = (str: string) =>
+  str
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/[^a-zA-Z0-9\s-]/g, '')
+    .trim()
+    .replace(/\s+/g, '_');
+
+export const buildFilename = (prefix: string, productTitle: string) => {
+  const now = new Date();
+  const date = `${now.getUTCFullYear()}-${String(now.getUTCMonth() + 1).padStart(2, '0')}-${String(now.getUTCDate()).padStart(2, '0')}`;
+  const time = `${String(now.getUTCHours()).padStart(2, '0')}-${String(now.getUTCMinutes()).padStart(2, '0')}`;
+  return `${prefix}_${sanitizeForFilename(productTitle)}_${date}_${time}.csv`;
+};
+
+interface DownloadBatchOrderSeatsButtonProps {
+  batchOrderId: string;
+  productTitle: string;
+}
+
+const DownloadBatchOrderSeatsButton = ({
+  batchOrderId,
+  productTitle,
+}: DownloadBatchOrderSeatsButtonProps) => {
+  const { download, loading } = useDownloadBatchOrderSeats();
+  const labelId = useId();
+  const intl = useIntl();
+
+  const handleClick = () => {
+    const prefix = intl.formatMessage(messages.seats);
+    download(batchOrderId, buildFilename(prefix, productTitle));
+  };
+
+  return (
+    <Button
+      size="small"
+      color="brand"
+      variant="primary"
+      className="dashboard-item__action-button"
+      disabled={loading}
+      onClick={handleClick}
+    >
+      {loading ? (
+        <Spinner theme="primary" aria-labelledby={labelId}>
+          <span id={labelId}>
+            <FormattedMessage {...messages.generating} />
+          </span>
+        </Spinner>
+      ) : (
+        <FormattedMessage {...messages.download} />
+      )}
+    </Button>
+  );
+};
+
+export default DownloadBatchOrderSeatsButton;

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/PaymentScheduleGrid/_styles.scss

@@ -18,8 +18,8 @@
   height: 24px;
   padding: 0 12px;
   border-radius: 24px;
-  font-family: var(--c--theme--font--families--accent);
-  font-weight: var(--c--theme--font--weight--semibold);
+  font-family: var(--c--globals--font--families--accent);
+  font-weight: var(--c--globals--font--weights--medium);
   font-size: rem-calc(12px);
 
   &--canceled,

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