richie-education 2.33.1-dev14 → 2.33.1-dev22

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

@@ -22,9 +22,10 @@
   font-weight: var(--c--theme--font--weight--semibold);
   font-size: rem-calc(12px);
 
-  &--incoming {
-    background-color: var(--c--theme--colors--grey87);
-    color: var(--c--theme--colors--charcoal);
+  &--canceled,
+  &--refunded {
+    color: var(--c--theme--colors--white);
+    background-color: var(--c--theme--colors--grey59);
   }
 
   &--paid {
@@ -37,8 +38,8 @@
     color: var(--c--theme--colors--white);
   }
 
-  &--require_payment,
-  &--failed {
+  &--refused,
+  &--error {
     background-color: var(--c--theme--colors--firebrick6);
     color: var(--c--theme--colors--white);
   }

package/js/components/PaymentScheduleGrid/index.tsx

@@ -22,6 +22,12 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Pending',
     description: 'Label displayed for pending payment state',
   },
+  [PaymentScheduleState.ERROR]: {
+    id: 'components.PaymentScheduleGrid.state.error',
+    defaultMessage: 'Pending',
+    description:
+      'Label displayed for error payment state. For learner we assume to display `pending`.',
+  },
   [PaymentScheduleState.PAID]: {
     id: 'components.PaymentScheduleGrid.state.paid',
     defaultMessage: 'Paid',
@@ -32,6 +38,16 @@ export const stateMessages = defineMessages({
     defaultMessage: 'Refused',
     description: 'Label displayed for refused payment state',
   },
+  [PaymentScheduleState.CANCELED]: {
+    id: 'components.PaymentScheduleGrid.state.canceled',
+    defaultMessage: 'Canceled',
+    description: 'Label displayed for canceled payment state',
+  },
+  [PaymentScheduleState.REFUNDED]: {
+    id: 'components.PaymentScheduleGrid.state.refunded',
+    defaultMessage: 'Refunded',
+    description: 'Label displayed for refunded payment state',
+  },
 });
 
 export const PaymentScheduleGrid = ({ schedule }: Props) => {

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
-import { Enrollment, CredentialOrder, OrderState, ProductType } from 'types/Joanie';
+import { Enrollment, CredentialOrder, ProductType, CANCELED_ORDER_STATES } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
 
@@ -23,7 +23,7 @@ const useLearnerCoursesSearch = () => {
     query,
     orderFilters: {
       product_type: [ProductType.CREDENTIAL],
-      state_exclude: [OrderState.CANCELED],
+      state_exclude: CANCELED_ORDER_STATES,
     },
   });
 

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

@@ -103,7 +103,13 @@ describe('<DashboardCourses/>', () => {
   it('renders an empty placeholder', async () => {
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     const enrollmentsDeferred = new Deferred();
@@ -145,25 +151,57 @@ describe('<DashboardCourses/>', () => {
       client,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(0, perPage),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credentia&state_exclude=canceled&page=2&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=2' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=2&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=2' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage, perPage * 2),
-        next: `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+        next:
+          'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=3' +
+          `&page_size=${perPage}`,
         previous: null,
         count: orders.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=3&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=3' +
+        `&page_size=${perPage}`,
       {
         results: orders.slice(perPage * 2, perPage * 3),
         next: null,
@@ -237,7 +275,13 @@ describe('<DashboardCourses/>', () => {
     jest.spyOn(console, 'error').mockImplementation(noop);
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     fetchMock.get(

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

@@ -265,6 +265,8 @@ export interface EnrollmentLight {
 export enum OrderState {
   ASSIGNED = 'assigned',
   CANCELED = 'canceled',
+  REFUNDING = 'refunding',
+  REFUNDED = 'refunded',
   COMPLETED = 'completed',
   DRAFT = 'draft',
   FAILED_PAYMENT = 'failed_payment',
@@ -294,6 +296,12 @@ export const ACTIVE_ORDER_STATES = [
 
 export const NOT_CANCELED_ORDER_STATES = [...ACTIVE_ORDER_STATES, ...PURCHASABLE_ORDER_STATES];
 
+export const CANCELED_ORDER_STATES = [
+  OrderState.CANCELED,
+  OrderState.REFUNDING,
+  OrderState.REFUNDED,
+];
+
 export const ENROLLABLE_ORDER_STATES = [
   OrderState.COMPLETED,
   OrderState.PENDING_PAYMENT,
@@ -448,8 +456,11 @@ export interface OrderPaymentInfo {
 }
 
 export enum PaymentScheduleState {
-  PENDING = 'pending',
+  CANCELED = 'canceled',
+  ERROR = 'error',
   PAID = 'paid',
+  PENDING = 'pending',
+  REFUNDED = 'refunded',
   REFUSED = 'refused',
 }
 
@@ -591,6 +602,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/OrderHelper/index.ts

@@ -1,5 +1,6 @@
 import {
   ACTIVE_ORDER_STATES,
+  CANCELED_ORDER_STATES,
   ENROLLABLE_ORDER_STATES,
   NestedCourseOrder,
   Order,
@@ -11,6 +12,7 @@ import {
 export enum OrderStatus {
   ASSIGNED = 'assigned',
   CANCELED = 'canceled',
+  REFUNDED = 'refunded',
   COMPLETED = 'completed',
   DRAFT = 'draft',
   FAILED_PAYMENT = 'failed_payment',
@@ -38,6 +40,8 @@ export class OrderHelper {
     const orderStatusMap = {
       [OrderState.ASSIGNED]: OrderStatus.ASSIGNED,
       [OrderState.CANCELED]: OrderStatus.CANCELED,
+      [OrderState.REFUNDING]: OrderStatus.CANCELED,
+      [OrderState.REFUNDED]: OrderStatus.REFUNDED,
       [OrderState.COMPLETED]: OrderStatus.COMPLETED,
       [OrderState.DRAFT]: OrderStatus.DRAFT,
       [OrderState.FAILED_PAYMENT]: OrderStatus.FAILED_PAYMENT,
@@ -91,6 +95,11 @@ export class OrderHelper {
     return ACTIVE_ORDER_STATES.includes(order.state);
   }
 
+  static isCanceled(order?: Order | NestedCourseOrder | OrderEnrollment) {
+    if (!order) return false;
+    return CANCELED_ORDER_STATES.includes(order.state);
+  }
+
   static isPurchasable(order?: Order | NestedCourseOrder | OrderEnrollment) {
     if (!order) return true;
     return PURCHASABLE_ORDER_STATES.includes(order.state);

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/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.spec.tsx

@@ -228,7 +228,13 @@ describe('<ProductCertificateFooter/>', () => {
   // From https://github.com/openfun/richie/issues/2237
   it('should hide purchase button after payment', async () => {
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${PER_PAGE.useOrdersEnrollments}`,
       {
         results: [],
         next: null,

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -86,7 +86,13 @@ describe('<DashboardItemOrder/> Contract', () => {
       });
 
       fetchMock.get(
-        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=1' +
+          '&page_size=50',
         { results: [order], next: null, previous: null, count: 1 },
       );
 
@@ -259,7 +265,13 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       // Go back to the list view to make sure the sign button is not shown anymore.
       fetchMock.get(
-        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        'https://joanie.endpoint/api/v1.0/orders/' +
+          '?product_type=credential' +
+          '&state_exclude=canceled' +
+          '&state_exclude=refunding' +
+          '&state_exclude=refunded' +
+          '&page=1' +
+          '&page_size=50',
         { results: [signedOrder], next: null, previous: null, count: 1 },
         { overwriteRoutes: true },
       );

package/js/widgets/Dashboard/components/DashboardItem/Order/Installment/index.tsx

@@ -61,6 +61,7 @@ type Props = {
 
 const Installment = ({ order }: Props) => {
   const isActive = OrderHelper.isActive(order);
+  const isCanceled = OrderHelper.isCanceled(order);
   const failedInstallment = PaymentScheduleHelper.getFailedInstallment(order.payment_schedule);
   const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
   const shouldDisplayDot = needsPaymentMethod || !!failedInstallment;
@@ -80,13 +81,13 @@ const Installment = ({ order }: Props) => {
           <FormattedMessage {...messages.paymentTitle} />
         </span>
       </div>
-      {!isActive && !needsPaymentMethod && (
+      {!isActive && !isCanceled && !needsPaymentMethod && (
         <p className="dashboard-splitted-card__item__description">
           <FormattedMessage {...messages.paymentInactiveDescription} />
         </p>
       )}
       <PaymentMethodManager order={order} />
-      {isActive && <InstallmentManager order={order} />}
+      {(isActive || isCanceled) && <InstallmentManager order={order} />}
     </div>
   );
 };

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal/index.tsx

@@ -11,7 +11,7 @@ import {
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useState, useEffect } from 'react';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
-import { CreditCard, Order } from 'types/Joanie';
+import { ACTIVE_ORDER_STATES, CreditCard, Order, OrderState } from 'types/Joanie';
 import { CreditCardSelector } from 'components/CreditCardSelector';
 import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
 import { Maybe } from 'types/utils';
@@ -54,14 +54,21 @@ export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps)
   const intl = useIntl();
   const retryModal = useModal();
   const failedInstallment = PaymentScheduleHelper.getFailedInstallment(order.payment_schedule);
+  const showPaymentMethod = ACTIVE_ORDER_STATES.filter<OrderState>(
+    (state) => state !== OrderState.COMPLETED,
+  ).includes(order.state);
 
   return (
     <>
       <Modal {...props} size={ModalSize.MEDIUM} title={intl.formatMessage(messages.title)}>
-        <h3 className="order-payment-details__title mb-s">
-          <FormattedMessage {...messages.paymentMethodTitle} />
-        </h3>
-        <CreditCardSelectorWrapper selectedCreditCardId={order.credit_card_id} />
+        {showPaymentMethod && (
+          <>
+            <h3 className="order-payment-details__title mb-s">
+              <FormattedMessage {...messages.paymentMethodTitle} />
+            </h3>
+            <CreditCardSelectorWrapper selectedCreditCardId={order.credit_card_id} />
+          </>
+        )}
         <h3 className="order-payment-details__title mb-s mt-b">
           <FormattedMessage {...messages.scheduleTitle} />
         </h3>

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateLearnerMessage/index.tsx

@@ -66,6 +66,11 @@ export const messages = defineMessages<MessageKeys>({
       'Status shown on the dashboard order item when order is completed and has a certificate',
     defaultMessage: 'Successfully completed',
   },
+  statusRefunded: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusRefunded',
+    description: 'Status shown on the dashboard order item when order is refunded',
+    defaultMessage: 'Refunded',
+  },
 });
 
 const OrderStateLearnerMessage = (props: OrderStateMessageBaseProps) => {

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage/index.tsx

@@ -10,18 +10,19 @@ export interface OrderStateMessageBaseProps {
 }
 
 export type MessageKeys =
-  | 'statusDraft'
   | 'statusAssigned'
+  | 'statusCanceled'
+  | 'statusCompleted'
+  | 'statusDraft'
+  | 'statusFailedPayment'
+  | 'statusNoPayment'
+  | 'statusPassed'
   | 'statusPending'
   | 'statusPendingPayment'
-  | 'statusCompleted'
-  | 'statusWaitingSignature'
+  | 'statusRefunded'
   | 'statusWaitingCounterSignature'
   | 'statusWaitingPaymentMethod'
-  | 'statusCanceled'
-  | 'statusNoPayment'
-  | 'statusFailedPayment'
-  | 'statusPassed';
+  | 'statusWaitingSignature';
 
 interface OrderStateMessageProps extends OrderStateMessageBaseProps {
   messages: Record<MessageKeys, MessageDescriptor>;
@@ -37,13 +38,14 @@ const OrderStateMessage = ({ order, messages }: OrderStateMessageProps) => {
   const orderStatusMessagesMap = {
     [OrderStatus.ASSIGNED]: messages.statusAssigned,
     [OrderStatus.CANCELED]: messages.statusCanceled,
-    [OrderStatus.DRAFT]: messages.statusDraft,
     [OrderStatus.COMPLETED]: messages.statusCompleted,
+    [OrderStatus.DRAFT]: messages.statusDraft,
     [OrderStatus.FAILED_PAYMENT]: messages.statusFailedPayment,
     [OrderStatus.NO_PAYMENT]: messages.statusNoPayment,
     [OrderStatus.PASSED]: messages.statusPassed,
     [OrderStatus.PENDING]: messages.statusPending,
     [OrderStatus.PENDING_PAYMENT]: messages.statusPendingPayment,
+    [OrderStatus.REFUNDED]: messages.statusRefunded,
     [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
     [OrderStatus.WAITING_PAYMENT_METHOD]: messages.statusWaitingPaymentMethod,
     [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.tsx

@@ -67,6 +67,11 @@ export const messages = defineMessages<MessageKeys>({
       'Status shown on the dashboard order item when order is completed with certificate',
     defaultMessage: 'Certified',
   },
+  statusRefunded: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusRefunded',
+    description: 'Status shown on the dashboard order item when order is refunded',
+    defaultMessage: 'Refunded',
+  },
 });
 
 const OrderStateTeacherMessage = (props: OrderStateMessageBaseProps) => {

package/js/widgets/Dashboard/index.spec.tsx

@@ -49,7 +49,13 @@ describe('<Dashboard />', () => {
       { count: 0, results: [] },
     );
     fetchMock.get(
-      'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=canceled' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        '&page_size=50',
       {
         count: 0,
         results: [],

package/package.json

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