richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -9,17 +9,22 @@ import {
 } from 'utils/test/factories/richie';
 import { History, HistoryContext } from 'hooks/useHistory';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
-import { EnrollmentFactory, OrderFactory, ProductFactory } from 'utils/test/factories/joanie';
+import {
+  CourseProductRelationFactory,
+  EnrollmentFactory,
+  CredentialOrderFactory,
+} from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { SessionProvider } from 'contexts/SessionContext';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
-import { CourseLight, Enrollment, Order, Product } from 'types/Joanie';
+import { CourseLight, CourseProductRelation, Enrollment, CredentialOrder } from 'types/Joanie';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
-import { expectBannerError } from 'utils/test/expectBanner';
+import { expectBannerError, expectBannerInfo, expectNoBannerInfo } from 'utils/test/expectBanner';
 import { Deferred } from 'utils/test/deferred';
 import { isOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { noop } from 'utils';
 import { PER_PAGE } from 'settings';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -86,42 +91,46 @@ describe('<DashboardCourses/>', () => {
     );
   };
 
-  const mockOrders = (orders: Order[], client?: QueryClient) => {
-    const products: Record<string, Product> = {};
+  const mockOrders = (orders: CredentialOrder[], client?: QueryClient) => {
+    const relations: Record<string, CourseProductRelation> = {};
     orders.forEach((order) => {
-      const product: Product = ProductFactory().one();
-      product.id = order.product;
+      const productId = order.product_id;
+      const courseCode = (order.course as CourseLight).code;
+      const relation = CourseProductRelationFactory().one();
+
       fetchMock.get(
-        'https://joanie.endpoint/api/v1.0/products/' +
-          product.id +
-          '/?course=' +
-          (order.course as CourseLight).code,
-        product,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${productId}/`,
+        relation,
       );
 
       // Allowing this option boosts the test performances. Without it, the tests case with 200+
       // items was taking ~60s to complete.
       if (client) {
         client.setQueryData(
-          ['products', JSON.stringify({ id: product.id, course: order.course })],
-          product,
+          ['courses-products', JSON.stringify({ id: courseCode, productId })],
+          relation,
         );
       }
-      products[order.id] = product;
+      relations[order.id] = relation;
     });
     orders.sort((a, b) => {
       const aDate = new Date(a.created_on);
       const bDate = new Date(b.created_on);
       return bDate.getTime() - aDate.getTime();
     });
-    return { orders, products };
+    return { orders, relations };
   };
 
-  const expectList = (entities: (Order | Enrollment)[], products: Record<string, Product>) => {
+  const expectList = (
+    entities: (CredentialOrder | Enrollment)[],
+    relations: Record<string, CourseProductRelation>,
+  ) => {
     const itemElements = document.querySelectorAll<HTMLElement>('.dashboard__courses__list__item');
     expect(itemElements.length).toBe(entities.length);
     entities.forEach((entity, i) => {
-      const title = isOrder(entity) ? products[entity.id].title : entity.course_run.course?.title;
+      const title = isOrder(entity)
+        ? relations[entity.id].product.title
+        : entity.course_run.course?.title;
       getByRole(itemElements[i], 'heading', {
         name: title,
         level: 5,
@@ -132,31 +141,30 @@ describe('<DashboardCourses/>', () => {
   it('renders an empty placeholder', async () => {
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     const enrollmentsDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/enrollments/?page=1&page_size=${perPage}&was_created_by_order=false`,
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=${perPage}`,
       enrollmentsDeferred.promise,
     );
 
     render(<Wrapper />);
 
     await expectSpinner('Loading orders and enrollments...');
-    const loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
-    expect(loadMoreButton).toBeDisabled();
-    expect(screen.queryByText('You have no enrollments nor orders yet.')).not.toBeInTheDocument();
+    expect(await screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
+    await expectNoBannerInfo('You have no enrollments nor orders yet');
 
     ordersDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
     enrollmentsDeferred.resolve({ results: [], next: null, previous: null, count: 0 });
 
     await expectNoSpinner('Loading orders and enrollments...');
-    await screen.findByText('You have no enrollments nor orders yet.');
+    expectBannerInfo('You have no enrollments nor orders yet.');
     expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
   });
 
-  const merge = (orders: Order[], enrollments: Enrollment[]) => {
+  const merge = (orders: CredentialOrder[], enrollments: Enrollment[]) => {
     return [...orders, ...enrollments].sort((a, b) => {
       const aDate = new Date(a.created_on);
       const bDate = new Date(b.created_on);
@@ -166,25 +174,37 @@ describe('<DashboardCourses/>', () => {
 
   it('should render the list of entities', async () => {
     const client = createTestQueryClient({ user: true });
-    const { orders, products } = mockOrders(OrderFactory().many(perPage * 2 + 1), client);
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=${perPage}`, {
-      results: orders.slice(0, perPage),
-      next: `https://joanie.endpoint/api/v1.0/orders/?page=2&page_size=${perPage}`,
-      prev: null,
-      count: orders.length,
-    });
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/?page=2&page_size=${perPage}`, {
-      results: orders.slice(perPage, perPage * 2),
-      next: `https://joanie.endpoint/api/v1.0/orders/?page=3&page_size=${perPage}`,
-      prev: null,
-      count: orders.length,
-    });
-    fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/?page=3&page_size=${perPage}`, {
-      results: orders.slice(perPage * 2, perPage * 3),
-      next: null,
-      prev: null,
-      count: orders.length,
-    });
+    const { orders, relations } = mockOrders(
+      CredentialOrderFactory().many(perPage * 2 + 1),
+      client,
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&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}`,
+        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}`,
+      {
+        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}`,
+        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}`,
+      {
+        results: orders.slice(perPage * 2, perPage * 3),
+        next: null,
+        previous: null,
+        count: orders.length,
+      },
+    );
     const enrollments: Enrollment[] = EnrollmentFactory().many(perPage * 2 + 2);
     enrollments.sort((a, b) => {
       const aDate = new Date(a.created_on);
@@ -193,29 +213,29 @@ describe('<DashboardCourses/>', () => {
     });
 
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/enrollments/?page=1&page_size=${perPage}&was_created_by_order=false`,
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=${perPage}`,
       {
         results: enrollments.slice(0, perPage),
-        next: `https://joanie.endpoint/api/v1.0/enrollments/?page=2&page_size=${perPage}&was_created_by_order=false`,
-        prev: null,
+        next: `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=2&page_size=${perPage}`,
+        previous: null,
         count: enrollments.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/enrollments/?page=2&page_size=${perPage}&was_created_by_order=false`,
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=2&page_size=${perPage}`,
       {
         results: enrollments.slice(perPage, perPage * 2),
-        next: `https://joanie.endpoint/api/v1.0/enrollments/?page=3&page_size=${perPage}&was_created_by_order=false`,
-        prev: null,
+        next: `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=3&page_size=${perPage}`,
+        previous: null,
         count: enrollments.length,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/enrollments/?page=3&page_size=${perPage}&was_created_by_order=false`,
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=3&page_size=${perPage}`,
       {
         results: enrollments.slice(perPage * 2, perPage * 3),
         next: null,
-        prev: null,
+        previous: null,
         count: enrollments.length,
       },
     );
@@ -226,21 +246,21 @@ describe('<DashboardCourses/>', () => {
 
     // Slice 1.
     await expectNoSpinner('Loading orders and enrollments...');
-    expect(screen.queryByText('You have no enrollments nor orders yet.')).not.toBeInTheDocument();
+    await expectNoBannerInfo('You have no enrollments nor orders yet');
     let loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
-    await waitFor(() => expectList(entities.slice(0, perPage), products), { interval: 200 });
+    await waitFor(() => expectList(entities.slice(0, perPage), relations), { interval: 200 });
 
     // Click on load more button to load slice 2.
     await act(async () => userEvent.click(loadMoreButton));
-    await waitFor(() => expectList(entities.slice(0, perPage * 2), products));
+    await waitFor(() => expectList(entities.slice(0, perPage * 2), relations));
     loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
 
     // Activate intersection observe to load slice 3.
     const { onIntersect } = (globalThis as any).__intersection_observer_props__;
     await waitFor(async () => onIntersect());
-    await waitFor(() => expectList(entities.slice(0, perPage * 3), products), { timeout: 30000 });
+    await waitFor(() => expectList(entities.slice(0, perPage * 3), relations), { timeout: 30000 });
     loadMoreButton = await screen.findByRole('button', { name: 'Load more' });
     expect(loadMoreButton).toBeEnabled();
   });
@@ -249,22 +269,22 @@ describe('<DashboardCourses/>', () => {
     jest.spyOn(console, 'error').mockImplementation(noop);
     const ordersDeferred = new Deferred();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${perPage}`,
       ordersDeferred.promise,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/enrollments/?page=1&page_size=${perPage}&was_created_by_order=false`,
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=${perPage}`,
       { results: [], next: null, previous: null, count: 0 },
     );
 
     render(<Wrapper />);
     ordersDeferred.resolve({
-      status: 500,
-      body: 'Bad request',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     await expectNoSpinner('Loading orders and enrollments...');
-    expect(screen.queryByText('You have no enrollments nor orders yet.')).not.toBeInTheDocument();
+    await expectNoBannerInfo('You have no enrollments nor orders yet');
     expect(screen.queryByRole('button', { name: 'Load more' })).not.toBeInTheDocument();
     await expectBannerError(
       'An error occurred while fetching orders and enrollments. Please retry later.',

package/js/pages/DashboardCourses/index.tsx

@@ -1,16 +1,17 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useRef } from 'react';
+import { Button } from '@openfun/cunningham-react';
 import {
+  isCredentialOrder,
+  isEnrollment,
   useOrdersEnrollments,
-  isEnrollement,
-  isOrder,
 } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { Spinner } from 'components/Spinner';
 import { DashboardItemEnrollment } from 'widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment';
 import { DashboardItemOrder } from 'widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder';
 import Banner, { BannerType } from 'components/Banner';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { Button } from 'components/Button';
+import { OrderState, ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   loading: {
@@ -31,7 +32,10 @@ const messages = defineMessages({
 });
 
 export const DashboardCourses = () => {
-  const { next, data, hasMore, error, isLoading, count } = useOrdersEnrollments();
+  const intl = useIntl();
+  const { next, data, hasMore, error, isLoading, count } = useOrdersEnrollments({
+    orderFilters: { product_type: [ProductType.CREDENTIAL], state_exclude: [OrderState.CANCELED] },
+  });
 
   const loadMoreButtonRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   useIntersectionObserver({
@@ -47,9 +51,9 @@ export const DashboardCourses = () => {
       ) : (
         <>
           {count === 0 && (
-            <p className="dashboard__courses__empty">
-              <FormattedMessage {...messages.emptyList} />
-            </p>
+            <div className="dashboard__courses__empty">
+              <Banner message={intl.formatMessage(messages.emptyList)} />
+            </div>
           )}
           <div className="dashboard__courses__list">
             {data.map((datum) => (
@@ -58,8 +62,8 @@ export const DashboardCourses = () => {
                 className="dashboard__courses__list__item"
                 data-testid="order-enrollment-list-item"
               >
-                {isEnrollement(datum) && <DashboardItemEnrollment enrollment={datum} />}
-                {isOrder(datum) && <DashboardItemOrder order={datum} />}
+                {isEnrollment(datum) && <DashboardItemEnrollment enrollment={datum} />}
+                {isCredentialOrder(datum) && <DashboardItemOrder order={datum} />}
               </div>
             ))}
           </div>
@@ -72,11 +76,10 @@ export const DashboardCourses = () => {
           )}
           {hasMore && (
             <Button
-              className="dashboard__courses__list__more-results"
               onClick={() => next()}
               disabled={isLoading}
               ref={loadMoreButtonRef}
-              color="transparent-darkest"
+              color="tertiary"
             >
               <FormattedMessage {...messages.loadMore} />
             </Button>

package/js/pages/DashboardCourses/useOrdersEnrollments.tsx

@@ -1,13 +1,33 @@
 import { defineMessages } from 'react-intl';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { Enrollment, Order, PaginatedResourceQuery } from 'types/Joanie';
+import {
+  Enrollment,
+  PaginatedResourceQuery,
+  CredentialOrder,
+  CertificateOrder,
+} from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 import { PER_PAGE } from 'settings';
+import { OrderResourcesQuery } from 'hooks/useOrders';
 
-export const isOrder = (obj: Order | Enrollment): obj is Order => {
-  return 'total' in obj && 'enrollments' in obj;
+export const isOrder = (
+  obj: CredentialOrder | CertificateOrder | Enrollment,
+): obj is CredentialOrder | CertificateOrder => {
+  return 'total' in obj && 'target_enrollments' in obj;
 };
-export const isEnrollement = (obj: Order | Enrollment): obj is Enrollment => {
+export const isCertificateOrder = (
+  obj: CredentialOrder | CertificateOrder | Enrollment,
+): obj is CertificateOrder => {
+  return isOrder(obj) && !!obj.enrollment;
+};
+export const isCredentialOrder = (
+  obj: CredentialOrder | CertificateOrder | Enrollment,
+): obj is CredentialOrder => {
+  return isOrder(obj) && !!obj.course;
+};
+export const isEnrollment = (
+  obj: CredentialOrder | CertificateOrder | Enrollment,
+): obj is Enrollment => {
   return 'was_created_by_order' in obj && 'course_run' in obj;
 };
 
@@ -19,20 +39,25 @@ const messages = defineMessages({
   },
 });
 
+interface UseOrdersEnrollmentsProps extends ResourceUnionPaginationProps {
+  orderFilters?: OrderResourcesQuery;
+}
+
 export const useOrdersEnrollments = ({
   perPage = PER_PAGE.useOrdersEnrollments,
-}: ResourceUnionPaginationProps = {}) => {
+  orderFilters = {},
+}: UseOrdersEnrollmentsProps = {}) => {
   const api = useJoanieApi();
   return useUnionResource<
-    Order,
+    CredentialOrder | CertificateOrder,
     Enrollment,
     PaginatedResourceQuery,
     { was_created_by_order: boolean } & PaginatedResourceQuery
   >({
     queryAConfig: {
-      queryKey: ['user', 'order'],
+      queryKey: ['user', 'orders'],
       fn: api.user.orders.get,
-      filters: {},
+      filters: orderFilters,
     },
     queryBConfig: {
       queryKey: ['user', 'enrollments'],
@@ -43,5 +68,6 @@ export const useOrdersEnrollments = ({
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/pages/DashboardCreditCardsManagement/DashboardCreditCardBox.tsx

@@ -1,8 +1,8 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useMemo } from 'react';
+import { Button } from '@openfun/cunningham-react';
 import { CreditCard } from 'types/Joanie';
 import { DashboardBox } from 'widgets/Dashboard/components/DashboardBox';
-import { Button } from 'components/Button';
 import { CreditCardExpirationStatus, CreditCardHelper } from 'utils/CreditCardHelper';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CreditCardBrandLogo } from './CreditCardBrandLogo';

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

@@ -19,6 +19,7 @@ import { expectFetchCall } from 'utils/test/expectFetchCall';
 import { expectBreadcrumbsToEqualParts } from 'utils/test/expectBreadcrumbsToEqualParts';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectBannerError } from 'utils/test/expectBanner';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -52,7 +53,7 @@ describe('<DahsboardEditCreditCard/>', () => {
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
-    fetchMock.put(updateUrl, 200);
+    fetchMock.put(updateUrl, HttpStatusCode.OK);
 
     await act(async () => {
       render(
@@ -72,7 +73,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     });
 
     expectBreadcrumbsToEqualParts([
-      'Back',
+      'chevron_leftBack',
       'My preferences',
       'Edit credit card "' + creditCard.title + '"',
     ]);
@@ -148,7 +149,7 @@ describe('<DahsboardEditCreditCard/>', () => {
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
-    fetchMock.put(updateUrl, 200);
+    fetchMock.put(updateUrl, HttpStatusCode.OK);
 
     await act(async () => {
       render(
@@ -240,7 +241,7 @@ describe('<DahsboardEditCreditCard/>', () => {
 
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
-    fetchMock.put(updateUrl, 200);
+    fetchMock.put(updateUrl, HttpStatusCode.OK);
 
     await act(async () => {
       render(
@@ -311,8 +312,8 @@ describe('<DahsboardEditCreditCard/>', () => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', creditCards);
     const updateUrl = 'https://joanie.endpoint/api/v1.0/credit-cards/' + creditCard.id + '/';
     fetchMock.put(updateUrl, {
-      status: 500,
-      body: 'Internal error',
+      status: HttpStatusCode.INTERNAL_SERVER_ERROR,
+      body: 'Internal Server Error',
     });
 
     await act(async () => {

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.tsx

@@ -1,13 +1,13 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useEffect } from 'react';
+import { Button, Checkbox } from '@openfun/cunningham-react';
+import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
+import Input from 'components/Form/Input';
 import { CreditCard } from 'types/Joanie';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
-import { Button } from 'components/Button';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import { CheckboxField, TextField } from 'components/Form';
-import { getLocalizedErrorMessage } from 'components/AddressesManagement/validationSchema';
 import { useCreditCardsManagement } from 'hooks/useCreditCardsManagement';
 import { noop } from 'utils';
 import { CreditCardBrandLogo } from './CreditCardBrandLogo';
@@ -67,7 +67,7 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
 
   const {
     methods: { update, safeDelete },
-    states: { isLoading, error },
+    states: { isPending, error },
   } = useCreditCardsManagement();
 
   const defaultValues: FormValues = {
@@ -77,11 +77,12 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
     is_main: true,
   };
 
-  const { register, handleSubmit, reset, formState } = useForm<FormValues>({
+  const form = useForm<FormValues>({
     defaultValues,
-    mode: 'onChange',
+    mode: 'onBlur',
     reValidateMode: 'onChange',
   });
+  const { register, handleSubmit, reset, formState } = form;
 
   useEffect(() => {
     reset({
@@ -107,51 +108,48 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
   };
 
   const renderContent = () => {
-    if (isLoading) {
+    if (isPending) {
       return <Spinner />;
     }
     if (error) {
       return <Banner message={error} type={BannerType.ERROR} rounded />;
     }
     return (
-      <form>
-        <TextField
-          aria-invalid={!!formState.errors.title}
-          id="title"
-          label={intl.formatMessage(messages.titleInputLabel)}
-          error={!!formState.errors.title}
-          message={getLocalizedErrorMessage(intl, formState.errors.title?.message)}
-          {...register('title')}
-        />
-        <div className="dashboard-edit-credit-card__sensitive">
-          <TextField
-            id="last_numbers"
-            disabled={true}
-            label={intl.formatMessage(messages.lastNumbersInputLabel)}
-            {...register('last_numbers')}
-          />
-          <div className="dashboard-edit-credit-card__sensitive__sub">
-            <CreditCardBrandLogo creditCard={creditCard} />
-            <TextField
-              size={8}
-              id="expiration"
+      <FormProvider {...form}>
+        <form className="form" onSubmit={handleSubmit(onSubmit)} noValidate>
+          <div className="form-row">
+            <Input name="title" label={intl.formatMessage(messages.titleInputLabel)} />
+          </div>
+          <div className="form-row dashboard-edit-credit-card__sensitive">
+            <Input
+              name="last_numbers"
               disabled={true}
-              label={intl.formatMessage(messages.expirationInputLabel)}
-              {...register('expiration')}
+              label={intl.formatMessage(messages.lastNumbersInputLabel)}
             />
+            <div className="dashboard-edit-credit-card__sensitive__sub">
+              <CreditCardBrandLogo creditCard={creditCard} />
+              <Input
+                size={8}
+                name="expiration"
+                disabled={true}
+                label={intl.formatMessage(messages.expirationInputLabel)}
+              />
+            </div>
           </div>
-        </div>
-        {!creditCard.is_main && (
-          <CheckboxField
-            aria-invalid={!!formState.errors?.is_main}
-            id="is_main"
-            label={intl.formatMessage(messages.isMainInputLabel)}
-            error={!!formState.errors?.is_main}
-            message={getLocalizedErrorMessage(intl, formState.errors.is_main?.message)}
-            {...register('is_main')}
-          />
-        )}
-      </form>
+          {!creditCard.is_main && (
+            <div className="form-row">
+              <Checkbox
+                aria-invalid={!!formState.errors?.is_main}
+                id="is_main"
+                label={intl.formatMessage(messages.isMainInputLabel)}
+                state={formState.errors.is_main ? 'error' : 'default'}
+                {...getLocalizedCunninghamErrorProp(intl, formState.errors.is_main?.message)}
+                {...register('is_main')}
+              />
+            </div>
+          )}
+        </form>
+      </FormProvider>
     );
   };
 
@@ -160,12 +158,12 @@ export const DashboardEditCreditCard = ({ creditCard, onSettled = noop }: Props)
       header={<FormattedMessage {...messages.header} />}
       footer={
         <>
-          <Button color="outline-primary" onClick={handleSubmit(onSubmit)}>
+          <Button color="secondary" onClick={handleSubmit(onSubmit)}>
             <FormattedMessage {...messages.submit} />
           </Button>
           {!creditCard.is_main && (
             <Button
-              color="outline-primary"
+              color="secondary"
               onClick={() =>
                 safeDelete(creditCard, {
                   onSuccess: () => {

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCardLoader.tsx

@@ -14,7 +14,7 @@ export const DashboardEditCreditCardLoader = () => {
   const params = useParams<{ creditCardId: string }>();
   const navigate = useDashboardNavigate();
   const {
-    states: { error, isLoading },
+    states: { error, isPending },
     ...creditCard
   } = useCreditCard(params.creditCardId);
 
@@ -22,7 +22,7 @@ export const DashboardEditCreditCardLoader = () => {
     creditCardTitle: creditCard.item?.title ?? '',
   });
 
-  if (isLoading) {
+  if (isPending) {
     return <Spinner />;
   }
   if (error) {