richie-education 2.28.2-dev26 → 2.28.2-dev53

package/js/api/joanie.ts

@@ -15,7 +15,8 @@ import context from 'utils/context';
 import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
-import { Maybe } from 'types/utils';
+import { Maybe, Nullable } from 'types/utils';
+import { PaymentSchedule } from 'types/Joanie';
 import { checkStatus, getFileFromResponse } from './utils';
 
 /*
@@ -78,9 +79,9 @@ export const getRoutes = () => {
       },
       creditCards: {
         get: `${baseUrl}/credit-cards/:id/`,
-        create: `${baseUrl}/credit-cards/`,
         update: `${baseUrl}/credit-cards/:id/`,
         delete: `${baseUrl}/credit-cards/:id/`,
+        tokenize: `${baseUrl}/credit-cards/tokenize-card/`,
       },
       addresses: {
         get: `${baseUrl}/addresses/:id/`,
@@ -89,14 +90,15 @@ export const getRoutes = () => {
         delete: `${baseUrl}/addresses/:id/`,
       },
       orders: {
-        abort: `${baseUrl}/orders/:id/abort/`,
+        cancel: `${baseUrl}/orders/:id/cancel/`,
         create: `${baseUrl}/orders/`,
-        submit: `${baseUrl}/orders/:id/submit/`,
         get: `${baseUrl}/orders/:id/`,
         invoice: {
           download: `${baseUrl}/orders/:id/invoice/`,
         },
         submit_for_signature: `${baseUrl}/orders/:id/submit_for_signature/`,
+        submit_installment_payment: `${baseUrl}/orders/:id/submit_installment_payment/`,
+        set_payment_method: `${baseUrl}/orders/:id/payment-method/`,
       },
       certificates: {
         download: `${baseUrl}/certificates/:id/download/`,
@@ -141,6 +143,9 @@ export const getRoutes = () => {
       },
       products: {
         get: `${baseUrl}/courses/:course_id/products/:id/`,
+        paymentSchedule: {
+          get: `${baseUrl}/courses/:course_id/products/:id/payment-schedule/`,
+        },
       },
       orders: {
         get: `${baseUrl}/courses/:course_id/orders/:id/`,
@@ -224,11 +229,6 @@ const API = (): Joanie.API => {
         get: async (filters?: ResourcesQuery) => {
           return fetchWithJWT(buildApiUrl(ROUTES.user.creditCards.get, filters)).then(checkStatus);
         },
-        create: async (creditCard) =>
-          fetchWithJWT(ROUTES.user.creditCards.create, {
-            method: 'POST',
-            body: JSON.stringify(creditCard),
-          }).then(checkStatus),
         update: async ({ id, ...creditCard }) => {
           return fetchWithJWT(ROUTES.user.creditCards.update.replace(':id', id), {
             method: 'PUT',
@@ -239,6 +239,8 @@ const API = (): Joanie.API => {
           fetchWithJWT(ROUTES.user.creditCards.delete.replace(':id', id), {
             method: 'DELETE',
           }).then(checkStatus),
+        tokenize: async () =>
+          fetchWithJWT(ROUTES.user.creditCards.tokenize, { method: 'POST' }).then(checkStatus),
       },
       addresses: {
         get: (id?: string) => {
@@ -260,10 +262,9 @@ const API = (): Joanie.API => {
           }).then(checkStatus),
       },
       orders: {
-        abort: async ({ id, payment_id }) => {
-          return fetchWithJWT(ROUTES.user.orders.abort.replace(':id', id), {
+        cancel: async (id) => {
+          return fetchWithJWT(ROUTES.user.orders.cancel.replace(':id', id), {
             method: 'POST',
-            body: payment_id ? JSON.stringify({ payment_id }) : undefined,
           }).then(checkStatus);
         },
         create: async (payload) =>
@@ -271,11 +272,6 @@ const API = (): Joanie.API => {
             method: 'POST',
             body: JSON.stringify(payload),
           }).then(checkStatus),
-        submit: async ({ id, ...payload }) =>
-          fetchWithJWT(ROUTES.user.orders.submit.replace(':id', id), {
-            method: 'PATCH',
-            body: JSON.stringify(payload),
-          }).then(checkStatus),
         get: async (filters) => {
           return fetchWithJWT(buildApiUrl(ROUTES.user.orders.get, filters)).then(checkStatus);
         },
@@ -291,6 +287,16 @@ const API = (): Joanie.API => {
           fetchWithJWT(ROUTES.user.orders.submit_for_signature.replace(':id', id), {
             method: 'POST',
           }).then(checkStatus),
+        submit_installment_payment: async (id, payload) =>
+          fetchWithJWT(ROUTES.user.orders.submit_installment_payment.replace(':id', id), {
+            method: 'POST',
+            body: JSON.stringify(payload),
+          }).then(checkStatus),
+        set_payment_method: async ({ id, ...payload }) =>
+          fetchWithJWT(ROUTES.user.orders.set_payment_method.replace(':id', id), {
+            method: 'POST',
+            body: JSON.stringify(payload),
+          }).then(checkStatus),
       },
       enrollments: {
         create: async (payload) =>
@@ -418,6 +424,25 @@ const API = (): Joanie.API => {
 
           return fetchWithJWT(buildApiUrl(ROUTES.courses.products.get, filters)).then(checkStatus);
         },
+        paymentSchedule: {
+          get: async (
+            filters?: Joanie.CourseProductQueryFilters,
+          ): Promise<Nullable<PaymentSchedule>> => {
+            if (!filters) {
+              throw new Error(
+                'A course code and a product id are required to fetch a course product',
+              );
+            } else if (!filters.course_id) {
+              throw new Error('A course code is required to fetch a course product');
+            } else if (!filters.id) {
+              throw new Error('A product id is required to fetch a course product');
+            }
+
+            return fetchWithJWT(
+              buildApiUrl(ROUTES.courses.products.paymentSchedule.get, filters),
+            ).then(checkStatus);
+          },
+        },
       },
       orders: {
         get: async (filters?: Joanie.CourseOrderResourceQuery) => {

package/js/api/lms/dummy.ts

@@ -68,7 +68,7 @@ const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
 
   const dummyOpenEdxApiProfile: OpenEdxApiProfile = {
     username: 'j_do',
-    name: 'John Do',
+    name: 'John Doe',
     email: 'j.do@whois.net',
     country: 'fr',
     level_of_education: OpenEdxLevelOfEducation.MASTER_OR_PROFESSIONNAL_DEGREE,
@@ -112,17 +112,6 @@ const API = (APIConf: LMSBackend | AuthenticationBackend): APILms => {
       account: {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         get: (username: string): Promise<OpenEdxApiProfile> => {
-          return Promise.resolve({
-            username: 'j_do',
-            name: 'John Do',
-            email: 'j.do@whois.net',
-            country: 'fr',
-            level_of_education: OpenEdxLevelOfEducation.MASTER_OR_PROFESSIONNAL_DEGREE,
-            gender: OpenEdxGender.MALE,
-            year_of_birth: '1971',
-            'pref-lang': OpenEdxLanguageIsoCode.ENGLISH,
-            language_proficiencies: [{ code: OpenEdxLanguageIsoCode.ENGLISH }],
-          } as OpenEdxApiProfile);
           return Promise.resolve(dummyOpenEdxApiProfile);
         },
         // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -4,6 +4,7 @@ import fetchMock from 'fetch-mock';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PropsWithChildren } from 'react';
+import { CunninghamProvider } from '@openfun/cunningham-react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
@@ -33,11 +34,13 @@ jest.mock('settings', () => ({
 describe('<AbstractContractFrame />', () => {
   const Wrapper = ({ children }: PropsWithChildren) => {
     return (
-      <QueryClientProvider client={createTestQueryClient({ user: true })}>
-        <IntlProvider locale="en">
-          <JoanieSessionProvider>{children}</JoanieSessionProvider>
-        </IntlProvider>
-      </QueryClientProvider>
+      <CunninghamProvider>
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <JoanieSessionProvider>{children}</JoanieSessionProvider>
+          </IntlProvider>
+        </QueryClientProvider>
+      </CunninghamProvider>
     );
   };
 
@@ -78,7 +81,7 @@ describe('<AbstractContractFrame />', () => {
     expect(await screen.findByTestId('dashboard-contract-frame')).toBeInTheDocument();
 
     const user = userEvent.setup();
-    await user.click(screen.getByRole('button', { name: 'Close dialog' }));
+    await user.click(screen.getByRole('button', { name: 'close' }));
     expect(mockOnClose).toHaveBeenCalled();
   });
 
@@ -115,6 +118,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -176,6 +180,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -222,7 +227,7 @@ describe('<AbstractContractFrame />', () => {
     // have been called
     await expectBannerError('An error happened while verifying signature. Please come back later.');
     expect(mockOnDone).not.toHaveBeenCalled();
-    button = screen.getByRole('button', { name: 'Close dialog' });
+    button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
@@ -237,6 +242,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -285,7 +291,7 @@ describe('<AbstractContractFrame />', () => {
       'The signature is taking more time than expected ... please come back later.',
     );
     expect(mockOnDone).not.toHaveBeenCalled();
-    button = screen.getByRole('button', { name: 'Close dialog' });
+    button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);
@@ -300,6 +306,7 @@ describe('<AbstractContractFrame />', () => {
     const mockCheckSignature = jest.fn(async () => checkSignatureDeferred.promise);
     const mockOnDone = jest.fn();
     const mockOnClose = jest.fn();
+    fetchMock.post('https://joanie.endpoint/api/v1.0/signature/notifications/', 200);
 
     await act(async () => {
       render(
@@ -323,7 +330,7 @@ describe('<AbstractContractFrame />', () => {
     );
 
     // Dummy signature interface should have been rendered
-    const button = screen.getByRole('button', { name: 'Close dialog' });
+    const button = screen.getByRole('button', { name: 'close' });
     await user.click(button);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);

package/js/components/ContractFrame/AbstractContractFrame.tsx

@@ -1,11 +1,11 @@
 import React, { lazy, Suspense, useEffect, useRef, useState } from 'react';
-import { Button, Loader } from '@openfun/cunningham-react';
+import { Button, Loader, Modal, ModalSize } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Modal } from 'components/Modal';
 import { Maybe } from 'types/utils';
 import { CONTRACT_SETTINGS } from 'settings';
 import Banner, { BannerType } from 'components/Banner';
 import { SuccessIcon } from 'components/SuccessIcon';
+import { noop } from 'utils';
 
 /*
   /!\ This component should not be used directly, only its implementations should be.
@@ -63,7 +63,7 @@ export const messages = defineMessages({
   },
   finishedDescription: {
     defaultMessage:
-      'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
+      'You will receive an email once your contract will be fully signed. You can now finalize your subscription.',
     description: 'Message displayed inside the contract signin modal when the contract is signed.',
     id: 'components.DashboardItem.Order.ContractFrame.finishedDescription',
   },
@@ -109,15 +109,16 @@ export interface SignatureProps {
   invitationLink: string;
 }
 
-const AbstractContractFrame = ({ isOpen, ...props }: Props) => {
+const AbstractContractFrame = ({ isOpen, onClose = noop, ...props }: Props) => {
   return (
     <Modal
       isOpen={isOpen}
-      shouldCloseOnOverlayClick={false}
-      shouldCloseOnEsc={false}
-      onRequestClose={props.onClose}
+      closeOnClickOutside={false}
+      closeOnEsc={false}
+      onClose={onClose}
+      size={ModalSize.LARGE}
     >
-      <ContractFrameContent {...props} />
+      <ContractFrameContent {...props} onClose={onClose} />
     </Modal>
   );
 };
@@ -220,11 +221,13 @@ const ContractFrameContent = ({
 
   const renderLoadingContract = () => {
     return (
-      <div className="ContractFrame__loading-container">
+      <div className="ContractFrame__container">
         <h3 className="ContractFrame__caption">
           <FormattedMessage {...messages.loadingContract} />
         </h3>
-        <Loader />
+        <div className="ContractFrame__footer">
+          <Loader />
+        </div>
       </div>
     );
   };
@@ -256,20 +259,20 @@ const ContractFrameContent = ({
         </Suspense>
       )}
       {step === ContractSteps.POLLING && (
-        <div className="ContractFrame__loading-container">
-          <div>
-            <h3 className="ContractFrame__caption">
-              <FormattedMessage {...messages.polling} />
-            </h3>
-            <p className="ContractFrame__content">
-              <FormattedMessage {...messages.pollingDescription} />
-            </p>
+        <div className="ContractFrame__container">
+          <h3 className="ContractFrame__caption">
+            <FormattedMessage {...messages.polling} />
+          </h3>
+          <p className="ContractFrame__content">
+            <FormattedMessage {...messages.pollingDescription} />
+          </p>
+          <div className="ContractFrame__footer">
+            <Loader />
           </div>
-          <Loader />
         </div>
       )}
       {step === ContractSteps.FINISHED && (
-        <div className="ContractFrame__finished">
+        <div className="ContractFrame__container">
           <SuccessIcon />
           <h3 className="ContractFrame__caption">
             <FormattedMessage {...messages.finishedCaption} />
@@ -277,9 +280,11 @@ const ContractFrameContent = ({
           <p className="ContractFrame__content">
             <FormattedMessage {...messages.finishedDescription} />
           </p>
-          <Button onClick={onClose}>
-            <FormattedMessage {...messages.finishedButton} />
-          </Button>
+          <div className="ContractFrame__footer">
+            <Button onClick={onClose}>
+              <FormattedMessage {...messages.finishedButton} />
+            </Button>
+          </div>
         </div>
       )}
     </div>

package/js/components/ContractFrame/LearnerContractFrame.tsx

@@ -1,12 +1,12 @@
 import { useQueryClient } from '@tanstack/react-query';
-import { CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import { Order, AbstractNestedOrder } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import AbstractContractFrame, {
   AbstractProps,
 } from 'components/ContractFrame/AbstractContractFrame';
 
 interface Props extends AbstractProps {
-  order: CredentialOrder | NestedCredentialOrder;
+  order: Order | AbstractNestedOrder;
 }
 
 const LearnerContractFrame = ({ order, onDone, ...props }: Props) => {

package/js/components/ContractFrame/_styles.scss

@@ -17,15 +17,13 @@ iframe#lex-persona {
 
 .ContractFrame {
   &__modal-body {
-    padding: 0 3rem 1.5rem 3rem;
+    padding: 1.5rem 3rem;
   }
 
-  &__loading-container {
+  &__container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 3rem 0;
-    gap: 4rem;
   }
 
   &__caption {
@@ -33,16 +31,6 @@ iframe#lex-persona {
     font-size: 1.5rem;
   }
 
-  &__finished {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    button {
-      margin-top: 2.5rem;
-    }
-  }
-
   &__content {
     color: r-theme-val(contract-frame, content-color);
     font-size: 0.875rem;
@@ -59,4 +47,8 @@ iframe#lex-persona {
     align-items: center;
     gap: 2rem;
   }
+
+  &__footer {
+    margin-top: 2.5rem;
+  }
 }

package/js/components/{SaleTunnel/CreditCardSelector → CreditCardSelector}/index.spec.tsx

@@ -1,21 +1,16 @@
 import { screen, within } from '@testing-library/react';
-import { useMemo, useState } from 'react';
+import { useState, useEffect } from 'react';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
 import userEvent from '@testing-library/user-event';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import { CreditCardSelector } from 'components/SaleTunnel/CreditCardSelector/index';
 import { render } from 'utils/test/render';
 import { CreditCard } from 'types/Joanie';
-import {
-  CredentialOrderFactory,
-  CreditCardFactory,
-  ProductFactory,
-} from 'utils/test/factories/joanie';
-import { SaleTunnelProps } from 'components/SaleTunnel/index';
+import { CreditCardFactory } from 'utils/test/factories/joanie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
-import { SaleTunnelStep, SaleTunnelContext, SaleTunnelContextType } from '../GenericSaleTunnel';
+import { SaleTunnelContextType } from 'components/SaleTunnel/GenericSaleTunnel';
+import { CreditCardSelector } from 'components/CreditCardSelector/index';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -43,30 +38,10 @@ describe('CreditCardSelector', () => {
 
     const Wrapper = () => {
       const [creditCard, setCreditCard] = useState<CreditCard>();
-      const context: SaleTunnelContextType = useMemo(
-        () => ({
-          webAnalyticsEventKey: 'eventKey',
-          order: CredentialOrderFactory().one(),
-          product: ProductFactory().one(),
-          props: {} as SaleTunnelProps,
-          setBillingAddress: jest.fn(),
-          creditCard,
-          setCreditCard,
-          onPaymentSuccess: jest.fn(),
-          step: SaleTunnelStep.PAYMENT,
-          registerSubmitCallback: jest.fn(),
-          unregisterSubmitCallback: jest.fn(),
-          runSubmitCallbacks: jest.fn(),
-        }),
-        [creditCard],
-      );
-      contextRef.current = context;
-
-      return (
-        <SaleTunnelContext.Provider value={context}>
-          <CreditCardSelector />
-        </SaleTunnelContext.Provider>
-      );
+      useEffect(() => {
+        contextRef.current.creditCard = creditCard;
+      }, [creditCard]);
+      return <CreditCardSelector creditCard={creditCard} setCreditCard={setCreditCard} />;
     };
 
     return { contextRef, Wrapper };
@@ -77,17 +52,12 @@ describe('CreditCardSelector', () => {
     const { Wrapper } = buildWrapper();
     render(<Wrapper />);
 
-    screen.getByRole('heading', {
-      name: 'Payment method',
-    });
-    screen.getByText('Choose your payment method or add a new one during the payment.');
-
     // During loading state, the spinner should be displayed and the current selected card should not be displayed.
-    expect(screen.queryByText('Add new credit card during payment')).not.toBeInTheDocument();
+    expect(screen.queryByText('Use another credit card')).not.toBeInTheDocument();
     await expectSpinner();
     await expectNoSpinner();
 
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
 
     // As the user has no credit card, the edit button should not be displayed.
     expect(
@@ -236,7 +206,7 @@ describe('CreditCardSelector', () => {
     await user.click(editButton);
 
     const radio = screen.getByRole('radio', {
-      name: /Use another credit card during payment/i,
+      name: /Use another credit card/i,
     });
     await user.click(radio);
 
@@ -246,7 +216,7 @@ describe('CreditCardSelector', () => {
     await user.click(submitButton);
 
     expect(screen.queryByTestId('credit-card-selector-modal')).not.toBeInTheDocument();
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
     expect(contextRef.current.creditCard).toBeUndefined();
   });
 
@@ -274,15 +244,15 @@ describe('CreditCardSelector', () => {
     await screen.findByTestId('credit-card-' + mainCreditCard.id);
     screen.getByText(mainCreditCard.title!);
     screen.getByText('Ends with •••• ' + mainCreditCard.last_numbers);
-    expect(screen.queryByText('Add new credit card during payment')).not.toBeInTheDocument();
     expect(contextRef.current.creditCard!.id).toEqual(mainCreditCard.id);
 
     const user = userEvent.setup();
-    const button = screen.getByRole('button', { name: /use another credit card during payment/i });
+    const button = screen.getByRole('button', { name: /use another credit card/i });
     await user.click(button);
 
     expect(screen.queryByTestId('credit-card-selector-modal')).not.toBeInTheDocument();
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
+    expect(button).not.toBeInTheDocument();
     expect(contextRef.current.creditCard).toBeUndefined();
   });
 

package/js/components/{SaleTunnel/CreditCardSelector → CreditCardSelector}/index.tsx

@@ -13,7 +13,6 @@ import { CreditCardBrandLogo } from 'pages/DashboardCreditCardsManagement/Credit
 import { CreditCard } from 'types/Joanie';
 import { useCreditCardsManagement } from 'hooks/useCreditCardsManagement';
 import { Spinner } from 'components/Spinner';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import { CreditCardExpirationStatus, CreditCardHelper } from 'utils/CreditCardHelper';
 import { useMatchMediaLg } from 'hooks/useMatchMedia';
 
@@ -33,20 +32,10 @@ const messages = defineMessages({
     description: 'Text to show the credit card expired date',
     defaultMessage: 'Expired since {month}/{year}',
   },
-  title: {
-    id: 'components.SaleTunnel.CreditCardSelector.title',
-    description: 'Title for the credit card section',
-    defaultMessage: 'Payment method',
-  },
-  description: {
-    id: 'components.SaleTunnel.CreditCardSelector.description',
-    description: 'Description for the credit card section',
-    defaultMessage: 'Choose your payment method or add a new one during the payment.',
-  },
   creditCardEmptyInlineDescription: {
     id: 'components.SaleTunnel.CreditCardSelector.creditCardEmptyInlineDescription',
     description: 'Description for the empty credit card inline',
-    defaultMessage: 'Use another credit card during payment',
+    defaultMessage: 'Use another credit card',
   },
   modalTitle: {
     id: 'components.SaleTunnel.CreditCardSelector.modalTitle',
@@ -71,7 +60,19 @@ const messages = defineMessages({
   },
 });
 
-export const CreditCardSelector = () => {
+export interface CreditCardSelectorProps {
+  creditCard?: CreditCard;
+  setCreditCard: (creditCard?: CreditCard) => void;
+  quickRemove?: boolean;
+  allowEdit?: boolean;
+}
+
+export const CreditCardSelector = ({
+  creditCard,
+  setCreditCard,
+  allowEdit = true,
+  quickRemove = true,
+}: CreditCardSelectorProps) => {
   const intl = useIntl();
   const modal = useModal();
   const isMobile = useMatchMediaLg();
@@ -81,8 +82,6 @@ export const CreditCardSelector = () => {
     items: creditCards,
   } = useCreditCardsManagement();
 
-  const { creditCard, setCreditCard } = useSaleTunnelContext();
-
   const getDefaultCreditCard = () => {
     if (creditCards.length === 0) {
       return;
@@ -102,12 +101,6 @@ export const CreditCardSelector = () => {
 
   return (
     <div className="credit-card-selector">
-      <h4 className="block-title mb-t">
-        <FormattedMessage {...messages.title} />
-      </h4>
-      <div className="description mb-s">
-        <FormattedMessage {...messages.description} />
-      </div>
       {fetching ? (
         <Spinner />
       ) : (
@@ -115,7 +108,7 @@ export const CreditCardSelector = () => {
           <div className="credit-card-selector__content">
             {creditCard ? <CreditCardInline creditCard={creditCard} /> : <CreditCardEmptyInline />}
 
-            {creditCards?.length > 0 && (
+            {allowEdit && creditCards?.length > 0 && (
               <Button
                 icon={<span className="material-icons">edit</span>}
                 color="tertiary-text"
@@ -125,11 +118,11 @@ export const CreditCardSelector = () => {
               />
             )}
           </div>
-          {creditCard && (
+          {creditCard && quickRemove && (
             <Button
               onClick={() => setCreditCard(undefined)}
               size="small"
-              color="tertiary"
+              color="secondary"
               className="mt-t"
               fullWidth={isMobile}
             >

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

@@ -5,8 +5,8 @@ import userEvent from '@testing-library/user-event';
 import { QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
-import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { alert } from 'utils/indirection/window';