richie-education 2.33.1-dev14 → 2.33.1-dev19

package/js/api/joanie.ts

@@ -83,6 +83,7 @@ export const getRoutes = () => {
         update: `${baseUrl}/credit-cards/:id/`,
         delete: `${baseUrl}/credit-cards/:id/`,
         tokenize: `${baseUrl}/credit-cards/tokenize-card/`,
+        promote: `${baseUrl}/credit-cards/:id/promote/`,
       },
       addresses: {
         get: `${baseUrl}/addresses/:id/`,
@@ -242,6 +243,10 @@ const API = (): Joanie.API => {
           }).then(checkStatus),
         tokenize: async () =>
           fetchWithJWT(ROUTES.user.creditCards.tokenize, { method: 'POST' }).then(checkStatus),
+        promote: async (id) =>
+          fetchWithJWT(ROUTES.user.creditCards.promote.replace(':id', id), {
+            method: 'PATCH',
+          }).then(checkStatus),
       },
       addresses: {
         get: (id?: string) => {

package/js/api/lms/dummy.ts

@@ -25,24 +25,26 @@ type JWTPayload = {
   username: string;
 };
 
-/* All JWT tokens will expire the 12 Dec 2024 ! */
+/* All JWT tokens will expire the 02 Feb 2026 ! */
 const JOANIE_DEV_DEMO_USER_JWT_TOKENS = {
-  admin:
-    'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzNjU1MjMsImp0aSI6IjRhMzQxZWVmMmVhOTRkNGFiMzQ5OThkOWE4ZDM5MTI0IiwiZW1haWwiOiJhZG1pbkBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6ImFkbWluIiwiZnVsbF9uYW1lIjoiIn0.rT8nymp8f4T7tIIXO-M5-ahXBwxoDNVqtaZIrb_GHuk',
   user0:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6Ijc2ZDNlNmU2NGYwMzQ4NTg5NTNiOWIxNWIwNDhhNjI0IiwiZW1haWwiOiJjc3RlcGhlbnNvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIwIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.JQRHKdr3Utl9rw-BQyvM8zXsY16CSgscEh9NAaP2INc',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImQwZmU1Zjg5ZjFhYTQ4YmM5NDhmNWU4ODFkNTNhNTU2IiwiZW1haWwiOiJwc21pdGhAZXhhbXBsZS5vcmciLCJsYW5ndWFnZSI6ImVuLXVzIiwidXNlcm5hbWUiOiJ1c2VyMCIsImZ1bGxfbmFtZSI6Ik90aGVyIE93bmVyIn0.eCawfaCzpO7U7iUPC1TE_XYDiRjq_crI93GqE8Fj8zc',
   user1:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjY3NDBmYzFlOTlhNDQwNzBhN2I1NWNkMTE0M2UzNThhIiwiZW1haWwiOiJuYW5jeTgzQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjEiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.mWtt4zKA-SiSQG2Pfrauq9ZYzSCq53qPa0jjdGaqFWQ',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImIwYjk3YjZkZjFlMzRkMTg4NjFiMGFhMjcxYWI0YWU1IiwiZW1haWwiOiJzYW1wc29uYW5uYUBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6InVzZXIxIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.yd46_63iuw19zmzH8aVNRAVAvAE4VGH8W8BjmFs6PPU',
   user2:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjBhNjkwY2QyZjA5ZTRjMWU4MTE4MzhmNGI0YjEzNGMyIiwiZW1haWwiOiJwYXVsYnJhbmRvbkBleGFtcGxlLm9yZyIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InVzZXIyIiwiZnVsbF9uYW1lIjoiT3RoZXIgT3duZXIifQ.EXUlkR-0IIj8xRRnlf9TWyVa8Gh_jPE7aNIu18BI83Q',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImNmYzY2OTNmY2Q5ZTRlZGViM2Y2NzU1MTZhNDIzMTdiIiwiZW1haWwiOiJsb3BlemFtYmVyQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjIiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.TlFILOXY-wK29M_BUgDKgjdOovSfEIlw5cNXed6ZV3w',
   user3:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjQ5N2IyMTEzYjQ4MjQ2YWNhOWUyMWIyMmZmZGJkYWU5IiwiZW1haWwiOiJqZXNzaWNhNDFAZXhhbXBsZS5jb20iLCJsYW5ndWFnZSI6ImVuLXVzIiwidXNlcm5hbWUiOiJ1c2VyMyIsImZ1bGxfbmFtZSI6Ik90aGVyIE93bmVyIn0.MXEFrvlkxPxlCpS172ls4eNvbV6vEDBJK1T3PHS9CoY',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6IjA4ZTcxZGJjYWIyMDRjMmZhZjgyMDVjZTRiNTliMjZiIiwiZW1haWwiOiJsb25nZWxpemFiZXRoQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjMiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.8NxYyjc567lO2Yc7me-TQr8PNvKqB5VLRzHd1Z4vA4U',
   user4:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImMyYTBmMGU0NTI5MTRmNWFhZDdiYTE1YWQ3ZTQ5MjgwIiwiZW1haWwiOiJkb25uYTE5QGV4YW1wbGUubmV0IiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjQiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.sVmYGo2LO8I1Sz2hP8wRk8yd0n1bOcWsyFG0ZXi5SbE',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImVmZGRkM2Q0YTdmZDQ4ZmFhYmZkM2Q2OTI4YzMwM2U4IiwiZW1haWwiOiJqb25lc2plbm5pZmVyQGV4YW1wbGUub3JnIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoidXNlcjQiLCJmdWxsX25hbWUiOiJPdGhlciBPd25lciJ9.Wn5CKuNPn0s4B_76Mxd3zTKqdUMaZGV456bhZ-fDe-o',
   organization_owner:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6IjYxNTZiYmNmMjZmMzQzYTBiYTgzM2ZmYzU1M2U1NjBlIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrb3JnYW5pemF0aW9uX293bmVyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoib3JnYW5pemF0aW9uX293bmVyIiwiZnVsbF9uYW1lIjoiT3JnYSBPd25lciBPd25lciJ9.wkdYFBasBIk4U-Vr7SdnkfgoqAlhn7rmr0Bqcs777_w',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6ImRiYmU2ZGExZjhmNDQzNDA4N2U2NzQ0YTIzM2JmNjFiIiwiZW1haWwiOiJkZXZlbG9wZXIrb3JnYW5pemF0aW9uX293bmVyQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJlbi11cyIsInVzZXJuYW1lIjoib3JnYW5pemF0aW9uX293bmVyIiwiZnVsbF9uYW1lIjoiT3JnYSBPd25lciJ9.a6QjOAOxCw7ZFKvg8OCcUaW8Xhbmfuqy3cwIqUCPfzE',
   student_user:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzMzOTI4MjE0LCJpYXQiOjE3MDIzOTIyMTQsImp0aSI6ImNkZjAyMGM4ODdjOTQxYzU5ZmExN2FkZGExNjNjMDIzIiwiZW1haWwiOiJqZWFuLWJhcHRpc3RlLnBlbnJhdGgrc3R1ZGVudF91c2VyQGZ1bi1tb29jLmZyIiwibGFuZ3VhZ2UiOiJmci1mciIsInVzZXJuYW1lIjoic3R1ZGVudF91c2VyIiwiZnVsbF9uYW1lIjoiXHUwMGM5dHVkaWFudCJ9.JMdnC2VXwq2VbNPrIYxj8PEq0oJJ4LZZT_ywWyE1lBM',
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6IjNhMGExYjM0OWEwNDQxNTg5ODU4NGUwZjMwNTc5M2EwIiwiZW1haWwiOiJkZXZlbG9wZXIrc3R1ZGVudF91c2VyQGV4YW1wbGUuY29tIiwibGFuZ3VhZ2UiOiJmci1mciIsInVzZXJuYW1lIjoic3R1ZGVudF91c2VyIiwiZnVsbF9uYW1lIjoiXHUwMGM5dHVkaWFudCJ9.3VvjPXwtuNA684hSIem3X2uFD-4WH8fipVDXMsi1cAc',
+  second_student_user:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6Ijg5ZDIyNDJjODRkODRiNThiZWVkYjg1NmU2MGNiM2FiIiwiZW1haWwiOiJkZXZlbG9wZXIrc2Vjb25kX3N0dWRlbnRfdXNlckBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZnItZnIiLCJ1c2VybmFtZSI6InNlY29uZF9zdHVkZW50X3VzZXIiLCJmdWxsX25hbWUiOiJcdTAwYzl0dWRpYW50IDAwMiJ9.p5p4Ku0w8mHortWW9TYHTJgORF9wnfCpq-6pvBRjU0Y',
+  admin:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNzcwMjIzOTY5LCJpYXQiOjE3Mzg2ODc5NjksImp0aSI6Ijk4M2UzNmI5MTUzODQ2Mjg4ZGMxNWNjOTAwNDgwMDA4IiwiZW1haWwiOiJhZG1pbkBleGFtcGxlLmNvbSIsImxhbmd1YWdlIjoiZW4tdXMiLCJ1c2VybmFtZSI6ImFkbWluIiwiZnVsbF9uYW1lIjoiIn0.VuSqfh4l0vtIDSdkEgCNyciiOhlFlMAsf5u5snm2Avw',
 };
 
 export type DevDemoUser = keyof typeof JOANIE_DEV_DEMO_USER_JWT_TOKENS;

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

@@ -175,4 +175,87 @@ describe('useCreditCards', () => {
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.tokenizing).toBe(false);
   });
+
+  it('promotes a credit card', async () => {
+    const responseDeferred = new Deferred();
+    fetchMock.patch(
+      'https://joanie.endpoint/api/v1.0/credit-cards/1/promote/',
+      responseDeferred.promise,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: false }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      result.current.methods.promote('1');
+    });
+
+    await waitFor(() => {
+      expect(result.current.states.updating).toBe(true);
+    });
+
+    expect(result.current.states.deleting).toBe(false);
+    expect(result.current.states.tokenizing).toBe(false);
+    expect(result.current.states.fetching).toBe(false);
+    expect(result.current.states.isFetched).toBe(true);
+    expect(result.current.states.isPending).toBe(true);
+    expect(result.current.states.error).toBe(undefined);
+
+    await act(async () => {
+      responseDeferred.resolve({});
+    });
+
+    expect(result.current.states.updating).toBe(false);
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.error).toBe(undefined);
+  });
+
+  it('manages error during credit card promotion', async () => {
+    fetchMock.patch(
+      'https://joanie.endpoint/api/v1.0/credit-cards/1/promote/',
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: true }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      await expect(result.current.methods.promote('1')).rejects.toThrow('Internal Server Error');
+    });
+
+    expect(result.current.states.error).toBe('Cannot set the credit card as default');
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.updating).toBe(false);
+  });
+
+  it('has a specific error when credit card deletion fails because it is used', async () => {
+    const creditCard = CreditCardFactory({
+      id: '1',
+      last_numbers: '1337',
+    }).one();
+    fetchMock.delete('https://joanie.endpoint/api/v1.0/credit-cards/1/', HttpStatusCode.CONFLICT);
+    const { result } = renderHook(() => useCreditCards(undefined, { enabled: true }), {
+      wrapper: Wrapper,
+    });
+
+    await waitFor(() => {
+      expect(result.current).not.toBeNull();
+    });
+
+    await act(async () => {
+      result.current.methods.delete(creditCard);
+    });
+
+    expect(result.current.states.error).toBe(
+      'Cannot delete the credit card •••• •••• •••• 1337 because it is used to pay at least one of your order.',
+    );
+  });
 });

package/js/hooks/useCreditCards/index.ts

@@ -1,8 +1,10 @@
 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';
+import { HttpError, HttpStatusCode } from 'utils/errors/HttpError';
 import {
   QueryOptions,
   ResourcesQuery,
@@ -27,6 +29,13 @@ const messages = defineMessages({
     description: 'Error message shown to the user when credit card deletion request fails.',
     defaultMessage: 'An error occurred while deleting the credit card. Please retry later.',
   },
+  errorCannotDelete: {
+    id: 'hooks.useCreditCards.errorCannotDelete',
+    description:
+      'Error message shown to the user when trying to delete a credit card that is used to pay at least order.',
+    defaultMessage:
+      'Cannot delete the credit card •••• •••• •••• {last_numbers} because it is used to pay at least one of your order.',
+  },
   errorTokenize: {
     id: 'hooks.useCreditCards.errorTokenize',
     description: 'Error message shown to the user when credit card tokenize request fails.',
@@ -37,6 +46,11 @@ const messages = defineMessages({
     description: 'Error message shown to the user when no credit cards matches.',
     defaultMessage: 'Cannot find the credit card',
   },
+  errorPromote: {
+    id: 'hooks.useCreditCards.errorPromote',
+    description: 'Error message shown to the user when promoting a credit card fails.',
+    defaultMessage: 'Cannot set the credit card as default',
+  },
 });
 
 const useCreditCardResources =
@@ -55,17 +69,55 @@ const useCreditCardResources =
       },
       onError: () => custom.methods.setError(intl.formatMessage(messages.errorTokenize)),
     });
+    const promoteHandler = mutation({
+      mutationFn: api.promote,
+      onSuccess: async () => {
+        custom.methods.setError(undefined);
+        custom.methods.invalidate();
+        props.onMutationSuccess?.(queryClient);
+      },
+      onError: () => custom.methods.setError(intl.formatMessage(messages.errorPromote)),
+    });
+
+    /**
+     * Override the default delete mutation to handle error more specifically.
+     * 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) => {
+      return custom.methods.delete(creditCard.id, {
+        ...options,
+        onError: (error: HttpError, variables, context) => {
+          if (error.code === HttpStatusCode.CONFLICT) {
+            custom.methods.setError(
+              intl.formatMessage(messages.errorCannotDelete, {
+                last_numbers: creditCard.last_numbers,
+              }),
+            );
+          } else {
+            custom.methods.setError(intl.formatMessage(messages.errorDelete));
+          }
+          options?.onError?.(error, variables, context);
+        },
+      });
+    };
 
     return {
       ...custom,
       methods: {
         ...custom.methods,
+        delete: deleteMutateAsync,
         tokenize: tokenizeHandler.mutateAsync,
+        promote: promoteHandler.mutateAsync,
       },
       states: {
         ...custom.states,
-        isPending: [tokenizeHandler, custom.states].some((value) => value?.isPending),
+        isPending: [tokenizeHandler, promoteHandler, custom.states].some(
+          (value) => value?.isPending,
+        ),
+        updating: custom.states.updating || promoteHandler.isPending,
         tokenizing: tokenizeHandler.isPending,
+        promoting: promoteHandler.isPending,
       },
     };
   };

package/js/hooks/useCreditCardsManagement.tsx

@@ -5,11 +5,6 @@ import { CreditCard } from 'types/Joanie';
 import { confirm } from 'utils/indirection/window';
 
 const messages = defineMessages({
-  errorCannotRemoveMain: {
-    id: 'hooks.useCreditCardsManagement.errorCannotRemoveMain',
-    description: 'Error shown if a user tries to delete a main credit card',
-    defaultMessage: 'Cannot remove main credit card.',
-  },
   deletionConfirmation: {
     id: 'hooks.useCreditCardsManagement.deletionConfirmation',
     description: 'Confirmation message shown to the user when he wants to delete a credit card',
@@ -23,15 +18,11 @@ export const useCreditCardsManagement = () => {
   const creditCards = useCreditCards();
 
   const safeDelete = (creditCard: CreditCard, options?: MutateOptions) => {
-    if (creditCard.is_main) {
-      creditCards.methods.setError(intl.formatMessage(messages.errorCannotRemoveMain));
-      return;
-    }
     const sure = confirm(intl.formatMessage(messages.deletionConfirmation));
     if (!sure) {
       return;
     }
-    creditCards.methods.delete(creditCard.id, options);
+    creditCards.methods.delete(creditCard, options);
   };
 
   return {

package/js/pages/DashboardCreditCardsManagement/DashboardCreditCardBox.tsx

@@ -76,11 +76,9 @@ export const DashboardCreditCardBox = ({ creditCard, promote, edit, remove }: Pr
               <FormattedMessage {...messages.edit} />
             </Button>
           </div>
-          {!creditCard.is_main && (
-            <Button color="primary" onClick={() => remove(creditCard)}>
-              <FormattedMessage {...messages.delete} />
-            </Button>
-          )}
+          <Button color="primary" onClick={() => remove(creditCard)}>
+            <FormattedMessage {...messages.delete} />
+          </Button>
         </>
       }
     >

package/js/pages/DashboardCreditCardsManagement/_styles.scss

@@ -2,12 +2,23 @@
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  position: relative;
 
   &__empty {
     text-align: center;
     color: r-theme-val(dashboard-credit-cards, empty-color);
     margin: 0;
   }
+
+  &__loading-overlay {
+    position: absolute;
+    pointer-events: none;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    background-color: rgba(255, 255, 255, 0.8);
+    z-index: 9999;
+  }
 }
 
 .dashboard-credit-card {
@@ -34,9 +45,6 @@
     }
   }
 
-  &__data {
-  }
-
   &__brand {
     font-weight: bold;
 

package/js/pages/DashboardCreditCardsManagement/index.spec.tsx

@@ -191,7 +191,7 @@ describe('<DashboardCreditCardsManagement/>', () => {
   });
 
   it('deletes a credit card', async () => {
-    const creditCards = CreditCardFactory().many(5);
+    const creditCards = CreditCardFactory().many(2);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     render(<DashboardPreferences />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -231,6 +231,46 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(screen.queryByText(creditCard.title!)).toBeNull();
   });
 
+  it('deletes a main credit card', async () => {
+    const creditCard = CreditCardFactory({ is_main: true }).one();
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard]);
+    render(<DashboardPreferences />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // Find the delete button of the credit card.
+    await screen.findByText(creditCard.title!);
+    const creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
+    const deleteButton = getByRole(creditCardContainer, 'button', {
+      name: 'Delete',
+    });
+
+    // Mock delete route and the refresh route to returns `creditCards` without the first one.
+    const deleteUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
+    fetchMock.delete(deleteUrl, []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [], {
+      overwriteRoutes: true,
+    });
+
+    // Clicking on the delete button calls delete API route.
+    expect(fetchMock.called(deleteUrl)).toBe(false);
+    // Clicking on the delete button calls window.confirm function.
+    expect(confirm).not.toHaveBeenCalled();
+    await act(async () => {
+      fireEvent.click(deleteButton);
+    });
+    expect(fetchMock.called(deleteUrl)).toBe(true);
+    expect(confirm).toHaveBeenCalled();
+
+    // No error is shown.
+    expect(screen.queryByText('An error occurred', { exact: false })).toBeNull();
+
+    // The address does not appear anymore in the list.
+    expect(screen.queryByText(creditCard.title!)).toBeNull();
+  });
+
   it('promotes a credit card', async () => {
     const creditCards = CreditCardFactory().many(5);
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
@@ -251,8 +291,9 @@ describe('<DashboardCreditCardsManagement/>', () => {
     expect(queryByText(creditCardContainer, 'Default credit card')).toBeNull();
 
     // Mock the update url and the refresh URL to return the first credit card as main.
-    const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
-    fetchMock.put(updateUrl, []);
+    const promoteUrl =
+      'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/promote/';
+    fetchMock.patch(promoteUrl, {});
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/credit-cards/',
       [{ ...creditCard, is_main: true }, ...creditCards.splice(1)],
@@ -260,11 +301,11 @@ describe('<DashboardCreditCardsManagement/>', () => {
     );
 
     // Clicking on the promote button calls the update API route.
-    expect(fetchMock.called(updateUrl)).toBe(false);
+    expect(fetchMock.called(promoteUrl)).toBe(false);
     await act(async () => {
       fireEvent.click(promoteButton);
     });
-    expect(fetchMock.called(updateUrl)).toBe(true);
+    expect(fetchMock.called(promoteUrl)).toBe(true);
 
     // Assert that "Default credit card" is displayed on the credit card's box.
     creditCardContainer = screen.getByTestId('dashboard-credit-card__' + creditCard.id);
@@ -298,26 +339,6 @@ describe('<DashboardCreditCardsManagement/>', () => {
       );
   });
 
-  it('cannot delete a main credit card', async () => {
-    const creditCards = CreditCardFactory().many(5);
-    const mainCreditCard = creditCards[3];
-    mainCreditCard.is_main = true;
-    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
-    render(<DashboardPreferences />, {
-      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-    });
-
-    // The delete button is not displayed.
-    const creditCardContainer = await screen.findByTestId(
-      'dashboard-credit-card__' + mainCreditCard.id,
-    );
-    expect(
-      queryByRole(creditCardContainer, 'button', {
-        name: 'Delete',
-      }),
-    ).toBeNull();
-  });
-
   it('cannot promote a main credit card', async () => {
     const creditCards = CreditCardFactory().many(5);
     const mainCreditCard = creditCards[3];

package/js/pages/DashboardCreditCardsManagement/index.tsx

@@ -13,11 +13,6 @@ const messages = defineMessages({
     description: 'Title of the dashboard credit cards management block',
     defaultMessage: 'Credit cards',
   },
-  errorCannotPromoteMain: {
-    id: 'components.DashboardCreditCardsManagement.errorCannotPromoteMain',
-    description: 'Error shown if a user tries to promote a main credit card',
-    defaultMessage: 'Cannot promote main credit card.',
-  },
   emptyList: {
     id: 'components.DashboardCreditCardsManagement.emptyList',
     description: 'Empty placeholder of the dashboard credit cards management block',
@@ -33,7 +28,7 @@ export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
   const intl = useIntl();
   const {
     states: { error, isPending },
-    methods: { setError, update, safeDelete },
+    methods: { promote, safeDelete },
     ...creditCards
   } = useCreditCardsManagement();
 
@@ -54,40 +49,29 @@ export const DashboardCreditCardsManagement = ({ onClickEdit }: Props) => {
     return creditCards.items.sort(sortByMainFirstThenByTitle);
   }, [creditCards.items]);
 
-  const promote = (creditCard: CreditCard) => {
-    if (creditCard.is_main) {
-      setError(intl.formatMessage(messages.errorCannotPromoteMain));
-      return;
-    }
-    update({
-      ...creditCard,
-      is_main: true,
-    });
-  };
-
   return (
     <DashboardCard header={<FormattedMessage {...messages.header} />}>
-      <div className="dashboard-credit-cards">
-        {isPending && <Spinner />}
-        {!isPending && (
-          <>
-            {error && <Banner message={error} type={BannerType.ERROR} rounded />}
-            {!error && creditCardsList.length === 0 && (
-              <p className="dashboard-credit-cards__empty">
-                <FormattedMessage {...messages.emptyList} />
-              </p>
-            )}
-            {creditCardsList.map((creditCard) => (
-              <DashboardCreditCardBox
-                creditCard={creditCard}
-                key={creditCard.id}
-                edit={(_creditCard) => onClickEdit?.(_creditCard)}
-                promote={promote}
-                remove={safeDelete}
-              />
-            ))}
-          </>
+      <div className="dashboard-credit-cards" aria-busy={isPending}>
+        {isPending && (
+          <div className="dashboard-credit-cards__loading-overlay">
+            <Spinner />
+          </div>
+        )}
+        {error && <Banner message={error} type={BannerType.ERROR} rounded />}
+        {!error && creditCardsList.length === 0 && (
+          <p className="dashboard-credit-cards__empty">
+            <FormattedMessage {...messages.emptyList} />
+          </p>
         )}
+        {creditCardsList.map((creditCard) => (
+          <DashboardCreditCardBox
+            key={creditCard.id}
+            creditCard={creditCard}
+            edit={(instance) => onClickEdit?.(instance)}
+            promote={({ id }) => promote(id)}
+            remove={safeDelete}
+          />
+        ))}
       </div>
     </DashboardCard>
   );

package/js/types/Joanie.ts

@@ -591,6 +591,7 @@ interface APIUser {
     get(): Promise<CreditCard[]>;
     update(payload: CreditCard): Promise<CreditCard>;
     tokenize(): Promise<Payment>;
+    promote(id: CreditCard['id']): Promise<void>;
   };
   orders: {
     cancel(id: Order['id']): Promise<void>;

package/js/utils/errors/HttpError.ts

@@ -30,5 +30,6 @@ export enum HttpStatusCode {
   BAD_REQUEST = 400,
   FORBIDDEN = 403,
   NOT_FOUND = 404,
+  CONFLICT = 409,
   INTERNAL_SERVER_ERROR = 500,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.33.1-dev14",
+  "version": "2.33.1-dev19",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {