richie-education 2.28.2-dev26 → 2.28.2-dev53

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

@@ -0,0 +1,322 @@
+import fetchMock from 'fetch-mock';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { act, renderHook } from '@testing-library/react';
+import { waitFor } from '@testing-library/dom';
+import { faker } from '@faker-js/faker';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { SessionProvider } from 'contexts/SessionContext';
+import { CertificateOrderFactory } from 'utils/test/factories/joanie';
+import { Deferred } from 'utils/test/deferred';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { useOmniscientOrder, useOmniscientOrders, useOrder, useOrders } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('useOrders', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>{children}</SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  describe('omniscient', () => {
+    it('retrieves all the orders', async () => {
+      const orders = CertificateOrderFactory().many(5);
+      const deferrer = new Deferred<typeof orders>();
+      fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', deferrer.promise, {
+        overwriteRoutes: true,
+      });
+
+      const { result } = renderHook(useOmniscientOrders, {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(true);
+      });
+      expect(result.current.states.isPending).toBe(true);
+      expect(result.current.states.isFetched).toBe(false);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.items).toEqual([]);
+
+      await act(async () => {
+        deferrer.resolve(orders);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(false);
+      });
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.isFetched).toBe(true);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.items).toEqual(orders);
+    });
+
+    it('retrieves a specific order omnisciently', async () => {
+      const orders = CertificateOrderFactory().many(5);
+      const deferrer = new Deferred<typeof orders>();
+      fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', deferrer.promise, {
+        overwriteRoutes: true,
+      });
+
+      const { result } = renderHook(() => useOmniscientOrder(orders[2].id), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(true);
+      });
+      expect(result.current.states.isPending).toBe(true);
+      expect(result.current.states.isFetched).toBe(false);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.item).toEqual(undefined);
+
+      await act(async () => {
+        deferrer.resolve(orders);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(false);
+      });
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.isFetched).toBe(true);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.item).toEqual(orders[2]);
+    });
+
+    it('cancels an order', async () => {
+      const deferrer = new Deferred();
+      const id = faker.string.uuid();
+      fetchMock.post(`https://joanie.endpoint/api/v1.0/orders/${id}/cancel/`, deferrer.promise);
+
+      const { result } = renderHook(() => useOmniscientOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current).not.toBeNull();
+      });
+
+      await act(async () => {
+        result.current.methods.cancel(id);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.isPending).toBe(true);
+      });
+      expect(result.current.states.fetching).toBe(false);
+      expect(result.current.states.cancelling).toBe(true);
+
+      await act(async () => {
+        deferrer.resolve(HttpStatusCode.OK);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.isPending).toBe(false);
+      });
+      expect(result.current.states.cancelling).toBe(false);
+    });
+
+    it('manages cancel mutation failure', async () => {
+      const id = faker.string.uuid();
+      fetchMock.post(
+        `https://joanie.endpoint/api/v1.0/orders/${id}/cancel/`,
+        HttpStatusCode.INTERNAL_SERVER_ERROR,
+      );
+
+      const { result } = renderHook(() => useOmniscientOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current).not.toBeNull();
+      });
+
+      expect(result.current.states.error).toBe(undefined);
+
+      await act(async () => {
+        await expect(result.current.methods.cancel(id)).rejects.toThrow('Internal Server Error');
+      });
+
+      expect(result.current.states.error).toBe('Cannot cancel the order.');
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.cancelling).toBe(false);
+    });
+
+    it("set an order's payment method", async () => {
+      const deferrer = new Deferred();
+      const id = faker.string.uuid();
+      const creditCardId = faker.string.uuid();
+      fetchMock.post(
+        `https://joanie.endpoint/api/v1.0/orders/${id}/payment-method/`,
+        deferrer.promise,
+      );
+
+      const { result } = renderHook(() => useOmniscientOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current).not.toBeNull();
+      });
+
+      await act(async () => {
+        result.current.methods.set_payment_method({
+          id,
+          credit_card_id: creditCardId,
+        });
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.isPending).toBe(true);
+      });
+      expect(result.current.states.fetching).toBe(false);
+      expect(result.current.states.settingPaymentMethod).toBe(true);
+
+      await act(async () => {
+        deferrer.resolve(HttpStatusCode.OK);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.isPending).toBe(false);
+      });
+      expect(result.current.states.settingPaymentMethod).toBe(false);
+    });
+
+    it('manages set payment method mutation failure', async () => {
+      const id = faker.string.uuid();
+      const creditCardId = faker.string.uuid();
+      fetchMock.post(
+        `https://joanie.endpoint/api/v1.0/orders/${id}/payment-method/`,
+        HttpStatusCode.INTERNAL_SERVER_ERROR,
+      );
+
+      const { result } = renderHook(() => useOmniscientOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current).not.toBeNull();
+      });
+
+      expect(result.current.states.error).toBe(undefined);
+
+      await act(async () => {
+        await expect(
+          result.current.methods.set_payment_method({ id, credit_card_id: creditCardId }),
+        ).rejects.toThrow('Internal Server Error');
+      });
+
+      expect(result.current.states.error).toBe("Cannot set the order's payment method.");
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.cancelling).toBe(false);
+    });
+  });
+
+  describe('non-omniscient', () => {
+    it('retrieves all the orders', async () => {
+      const orders = CertificateOrderFactory().many(5);
+      const deferrer = new Deferred<typeof orders>();
+      fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', deferrer.promise, {
+        overwriteRoutes: true,
+      });
+
+      const { result } = renderHook(useOrders, {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(true);
+      });
+      expect(result.current.states.isPending).toBe(true);
+      expect(result.current.states.isFetched).toBe(false);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.items).toEqual([]);
+
+      await act(async () => {
+        deferrer.resolve(orders);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(false);
+      });
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.isFetched).toBe(true);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.items).toEqual(orders);
+    });
+
+    it('retrieves a specific order', async () => {
+      const order = CertificateOrderFactory().one();
+      const deferrer = new Deferred<typeof order>();
+      fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, deferrer.promise);
+
+      const { result } = renderHook(() => useOrder(order.id), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(true);
+      });
+      expect(result.current.states.isPending).toBe(true);
+      expect(result.current.states.isFetched).toBe(false);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.item).toEqual(undefined);
+
+      await act(async () => {
+        deferrer.resolve(order);
+      });
+
+      await waitFor(() => {
+        expect(result.current.states.fetching).toBe(false);
+      });
+      expect(result.current.states.isPending).toBe(false);
+      expect(result.current.states.isFetched).toBe(true);
+      expect(result.current.states.creating).toBe(false);
+      expect(result.current.item).toEqual(order);
+    });
+
+    it('has a method to cancel an order', async () => {
+      const { result } = renderHook(() => useOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.methods.cancel).not.toBeUndefined();
+      });
+    });
+
+    it('has a method to set a payment method', async () => {
+      const { result } = renderHook(() => useOrders(undefined, { enabled: false }), {
+        wrapper: Wrapper,
+      });
+
+      await waitFor(() => {
+        expect(result.current.methods.set_payment_method).not.toBeUndefined();
+      });
+    });
+  });
+});

package/js/hooks/{useOrders.ts → useOrders/index.ts}

@@ -1,4 +1,5 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   API,
   CertificateOrder,
@@ -12,7 +13,7 @@ import {
 } from 'types/Joanie';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { useSessionMutation } from 'utils/react-query/useSessionMutation';
-import { QueryOptions, useResource, useResourcesCustom, UseResourcesProps } from './useResources';
+import { QueryOptions, useResource, useResourcesCustom, UseResourcesProps } from '../useResources';
 
 export type OrderResourcesQuery = PaginatedResourceQuery & {
   course_code?: CourseLight['code'];
@@ -36,6 +37,16 @@ const messages = defineMessages({
     description: 'Error message shown to the user when no orders matches.',
     defaultMessage: 'Cannot find the orders.',
   },
+  errorCancel: {
+    id: 'hooks.useOrders.errorCancel',
+    description: 'Error message shown to the user when cancel mutation failed.',
+    defaultMessage: 'Cannot cancel the order.',
+  },
+  errorSetPaymentMethod: {
+    id: 'hooks.useOrders.errorSetPaymentMethod',
+    description: 'Error message shown to the user when set payment method mutation failed.',
+    defaultMessage: "Cannot set the order's payment method.",
+  },
 });
 
 function omniscientFiltering(
@@ -73,25 +84,40 @@ const useOrdersBase =
     filters?: OrderResourcesQuery,
     queryOptions?: QueryOptions<CredentialOrder | CertificateOrder>,
   ) => {
+    const intl = useIntl();
     const custom = useResourcesCustom({ ...props, filters, queryOptions });
-    const abortHandler = useSessionMutation({
-      mutationFn: useJoanieApi().user.orders.abort,
-      onSuccess: () => {
-        custom.methods.invalidate();
-      },
+    const queryClient = useQueryClient();
+    const api = props.apiInterface();
+    const onSuccess = async () => {
+      custom.methods.setError(undefined);
+      await custom.methods.invalidate();
+      props.onMutationSuccess?.(queryClient);
+    };
+    const cancelHandler = useSessionMutation({
+      mutationFn: api.cancel,
+      onSuccess,
+      onError: () => custom.methods.setError(intl.formatMessage(messages.errorCancel)),
     });
-    const submitHandler = useSessionMutation({
-      mutationFn: useJoanieApi().user.orders.submit,
-      onSuccess: () => {
-        custom.methods.invalidate();
-      },
+    const setPaymentMethodHandler = useSessionMutation({
+      mutationFn: api.set_payment_method,
+      onSuccess,
+      onError: () => custom.methods.setError(intl.formatMessage(messages.errorSetPaymentMethod)),
     });
+
     return {
       ...custom,
       methods: {
         ...custom.methods,
-        abort: abortHandler.mutateAsync,
-        submit: submitHandler.mutateAsync,
+        cancel: cancelHandler.mutateAsync,
+        set_payment_method: setPaymentMethodHandler.mutateAsync,
+      },
+      states: {
+        ...custom.states,
+        cancelling: cancelHandler.isPending,
+        settingPaymentMethod: setPaymentMethodHandler.isPending,
+        isPending: [custom.states, cancelHandler, setPaymentMethodHandler].some(
+          (value) => value?.isPending,
+        ),
       },
     };
   };

package/js/hooks/usePaymentSchedule.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { PaymentSchedule } from 'types/Joanie';
+import { Nullable } from 'types/utils';
+
+type PaymentScheduleFilters = {
+  course_code: string;
+  product_id: string;
+};
+
+export const usePaymentSchedule = (filters: PaymentScheduleFilters) => {
+  const queryKey = ['courses-products', ...Object.values(filters), 'payment-schedule'];
+
+  const api = useJoanieApi();
+  return useQuery<Nullable<PaymentSchedule>, Error>({
+    queryKey,
+    queryFn: () =>
+      api.courses.products.paymentSchedule.get({
+        id: filters.product_id,
+        course_id: filters.course_code,
+      }),
+  });
+};

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

@@ -9,7 +9,7 @@ import { CourseLightFactory, CredentialOrderFactory } from 'utils/test/factories
 import { SessionProvider } from 'contexts/SessionContext';
 import { Deferred } from 'utils/test/deferred';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { ACTIVE_ORDER_STATES } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import useProductOrder from '.';
 
 jest.mock('utils/context', () => ({
@@ -45,69 +45,86 @@ describe('useProductOrder', () => {
     );
   };
 
-  it.each(ACTIVE_ORDER_STATES)(
-    'should retrieves the last order when order.state is %s',
-    async (currentState) => {
-      // the most recent order of accepted state will be return
-      const order = CredentialOrderFactory({
-        state: currentState,
-        created_on: new Date().toISOString(),
-        course: CourseLightFactory({ code: '00000' }).one(),
-      }).one();
-      const ordersByState = ACTIVE_ORDER_STATES.filter((state) => state !== currentState).map(
-        (state) =>
-          CredentialOrderFactory({
-            state,
-            created_on: faker.date.past({ years: 1 }).toISOString(),
-            course: CourseLightFactory({ code: '00000' }).one(),
-            product_id: order.product_id,
-          }).one(),
-      );
-      ordersByState.push(order);
+  it.each([
+    OrderState.DRAFT,
+    OrderState.ASSIGNED,
+    OrderState.TO_SIGN,
+    OrderState.SIGNING,
+    OrderState.TO_SAVE_PAYMENT_METHOD,
+    OrderState.PENDING,
+    OrderState.PENDING_PAYMENT,
+    OrderState.NO_PAYMENT,
+    OrderState.FAILED_PAYMENT,
+    OrderState.COMPLETED,
+  ])('should retrieves the last order when order.state is %s', async (currentState) => {
+    // the most recent order of accepted state will be return
+    const order = CredentialOrderFactory({
+      state: currentState,
+      created_on: new Date().toISOString(),
+      course: CourseLightFactory({ code: '00000' }).one(),
+    }).one();
+    const ordersByState = NOT_CANCELED_ORDER_STATES.filter((state) => state !== currentState).map(
+      (state) =>
+        CredentialOrderFactory({
+          state,
+          created_on: faker.date.past({ years: 1 }).toISOString(),
+          course: CourseLightFactory({ code: '00000' }).one(),
+          product_id: order.product_id,
+        }).one(),
+    );
+    ordersByState.push(order);
 
-      const responseDeferred = new Deferred();
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=00000&product_id=${order.product_id}&state=pending&state=validated&state=submitted`,
-        responseDeferred.promise,
-      );
+    const responseDeferred = new Deferred();
+    const url =
+      'https://joanie.endpoint/api/v1.0/orders/' +
+      '?course_code=00000' +
+      `&product_id=${order.product_id}` +
+      `&state=${OrderState.PENDING}` +
+      `&state=${OrderState.PENDING_PAYMENT}` +
+      `&state=${OrderState.NO_PAYMENT}` +
+      `&state=${OrderState.FAILED_PAYMENT}` +
+      `&state=${OrderState.COMPLETED}` +
+      `&state=${OrderState.DRAFT}` +
+      `&state=${OrderState.ASSIGNED}` +
+      `&state=${OrderState.TO_SIGN}` +
+      `&state=${OrderState.SIGNING}` +
+      `&state=${OrderState.TO_SAVE_PAYMENT_METHOD}`;
+    fetchMock.get(url, responseDeferred.promise);
 
-      const { result } = renderHook(
-        () => useProductOrder({ productId: order.product_id, courseCode: '00000' }),
-        {
-          wrapper: Wrapper,
-        },
-      );
+    const { result } = renderHook(
+      () => useProductOrder({ productId: order.product_id, courseCode: '00000' }),
+      {
+        wrapper: Wrapper,
+      },
+    );
 
-      await waitFor(() => {
-        expect(result.current.states.fetching).toBe(true);
-        expect(result.current.item).toBeUndefined();
-      });
-      nbApiCalls += 1; // call orders from useProductOrder
-      const calledUrls = fetchMock.calls().map((call) => call[0]);
-      expect(calledUrls).toHaveLength(nbApiCalls);
-      expect(calledUrls).toContain(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=00000&product_id=${order.product_id}&state=pending&state=validated&state=submitted`,
-      );
-      expect(result.current.states.creating).toBe(false);
-      expect(result.current.states.deleting).toBeUndefined();
-      expect(result.current.states.updating).toBeUndefined();
-      expect(result.current.states.isPending).toBe(true);
-      expect(result.current.states.error).toBe(undefined);
+    await waitFor(() => {
+      expect(result.current.states.fetching).toBe(true);
+      expect(result.current.item).toBeUndefined();
+    });
+    nbApiCalls += 1; // call orders from useProductOrder
+    const calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(nbApiCalls);
+    expect(calledUrls).toContain(url);
+    expect(result.current.states.creating).toBe(false);
+    expect(result.current.states.deleting).toBeUndefined();
+    expect(result.current.states.updating).toBeUndefined();
+    expect(result.current.states.isPending).toBe(true);
+    expect(result.current.states.error).toBe(undefined);
 
-      await act(async () => {
-        responseDeferred.resolve(ordersByState);
-      });
+    await act(async () => {
+      responseDeferred.resolve(ordersByState);
+    });
 
-      await waitFor(() => {
-        expect(result.current.states.fetching).toBe(false);
-        expect(result.current.item).toEqual(order);
-      });
+    await waitFor(() => {
+      expect(result.current.states.fetching).toBe(false);
+      expect(result.current.item).toEqual(order);
+    });
 
-      expect(result.current.states.creating).toBe(false);
-      expect(result.current.states.deleting).toBeUndefined();
-      expect(result.current.states.updating).toBeUndefined();
-      expect(result.current.states.isPending).toBe(false);
-      expect(result.current.states.error).toBe(undefined);
-    },
-  );
+    expect(result.current.states.creating).toBe(false);
+    expect(result.current.states.deleting).toBeUndefined();
+    expect(result.current.states.updating).toBeUndefined();
+    expect(result.current.states.isPending).toBe(false);
+    expect(result.current.states.error).toBe(undefined);
+  });
 });

package/js/hooks/useProductOrder/index.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useOrders } from 'hooks/useOrders';
-import { ACTIVE_ORDER_STATES } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES } from 'types/Joanie';
 
 interface UseProductOrderProps {
   courseCode?: string;
@@ -12,7 +12,7 @@ const useProductOrder = ({ courseCode, enrollmentId, productId }: UseProductOrde
     course_code: courseCode,
     enrollment_id: enrollmentId,
     product_id: productId,
-    state: ACTIVE_ORDER_STATES,
+    state: NOT_CANCELED_ORDER_STATES,
   });
 
   const order = useMemo(() => {

package/js/hooks/useResources/useResourcesRoot.ts

@@ -59,6 +59,7 @@ const emptyArray: never[] = [];
  * @param queryOptions - Pass custom options to react-query.
  * @param localized - Is the resource local-dependent ? If so, the query will be invalidated on locale change.
  * @param resourceMessages - Custom messages to use for this resource.
+ * @param onMutationSuccess - Custom callback triggered on mutation success.
  */
 export const useResourcesRoot = <
   TData extends Resource,
@@ -136,21 +137,21 @@ export const useResourcesRoot = <
   const mutation = (session ? useSessionMutation : useMutation) as typeof useMutation;
 
   const writeHandlers = {
-    create: api.create
+    create: api?.create
       ? mutation({
           mutationFn: api.create,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorCreate)),
         })
       : undefined,
-    update: api.update
+    update: api?.update
       ? mutation({
           mutationFn: api.update,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorUpdate)),
         })
       : undefined,
-    delete: api.delete
+    delete: api?.delete
       ? mutation({
           mutationFn: api.delete,
           onSuccess,

package/js/index.tsx

@@ -11,6 +11,7 @@ import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.promise';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import countries from 'i18n-iso-countries';
 import { createRoot } from 'react-dom/client';
 import createQueryClient from 'utils/react-query/createQueryClient';
@@ -116,6 +117,7 @@ async function render() {
     const reactRoot = createRoot(rootContainer);
     reactRoot.render(
       <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
         <IntlProvider locale={locale} messages={translatedMessages} defaultLocale="en-US">
           <Root richieReactSpots={richieReactSpots} />
         </IntlProvider>

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

@@ -23,7 +23,7 @@ describe('CreditCardBrandLogo', () => {
     render(<CreditCardBrandLogo creditCard={creditCard} />);
     expect(screen.getByRole('presentation')).toHaveAttribute(
       'src',
-      '/static/richie/images/components/DashboardCreditCardsManagement/logo_CB.svg',
+      '/static/richie/images/components/DashboardCreditCardsManagement/logo_cb.svg',
     );
   });
 });

package/js/pages/DashboardCreditCardsManagement/CreditCardBrandLogo.tsx

@@ -8,8 +8,10 @@ export const CreditCardBrandLogo = ({
   creditCard: CreditCard;
   variant?: 'default' | 'inline';
 }) => {
-  const creditCardBrand = Object.values<string>(CreditCardBrand).includes(creditCard.brand)
-    ? creditCard.brand
+  const creditCardBrand = Object.values<string>(CreditCardBrand).includes(
+    creditCard.brand.toLowerCase(),
+  )
+    ? creditCard.brand.toLowerCase()
     : CreditCardBrand.CB;
 
   return (