richie-education 2.28.2-dev39 → 2.28.2-dev53

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.spec.tsx

@@ -1,7 +1,13 @@
 import { screen, waitForElementToBeRemoved } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
-import { CertificateProduct, CourseLight, OrderState, ProductType } from 'types/Joanie';
+import {
+  CertificateProduct,
+  CourseLight,
+  OrderState,
+  ProductType,
+  PURCHASABLE_ORDER_STATES,
+} from 'types/Joanie';
 import {
   CourseStateFactory,
   RichieContextFactory as mockRichieContextFactory,
@@ -43,7 +49,7 @@ jest.mock('components/SaleTunnel', () => ({
         return;
       }
       setTimeout(() => {
-        const order = Factories.CertificateOrderWithOneClickPaymentFactory().one();
+        const order = Factories.CertificateOrderFactory().one();
         onFinish?.(order);
       }, 100);
     }, [isOpen]);
@@ -135,7 +141,7 @@ describe('<ProductCertificateFooter/>', () => {
   it('should display download button for a course run with certificate.', () => {
     const order = OrderEnrollmentFactory({
       certificate_id: 'FAKE_CERTIFICATE_ID',
-      state: OrderState.VALIDATED,
+      state: OrderState.COMPLETED,
       product_id: product.id,
     }).one();
     const enrollment = EnrollmentFactory({
@@ -151,35 +157,23 @@ describe('<ProductCertificateFooter/>', () => {
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
 
-  it('should not display purchase button for a course run with submitted order.', () => {
-    const order = OrderEnrollmentFactory({
-      certificate_id: undefined,
-      product_id: product.id,
-      state: OrderState.SUBMITTED,
-    }).one();
-    const enrollment = EnrollmentFactory({
-      orders: [order],
-      course_run: CourseRunFactory({ course }).one(),
-    }).one();
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
-    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
-    expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
-  });
-
-  it('should display purchase button for a course run with pending order.', () => {
-    const order = OrderEnrollmentFactory({
-      certificate_id: undefined,
-      product_id: product.id,
-      state: OrderState.PENDING,
-    }).one();
-    const enrollment = EnrollmentFactory({
-      orders: [order],
-      course_run: CourseRunFactory({ course }).one(),
-    }).one();
-    render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
-    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
-    expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
-  });
+  it.each(PURCHASABLE_ORDER_STATES)(
+    'should display purchase button for a course run with %s order.',
+    (state) => {
+      const order = OrderEnrollmentFactory({
+        certificate_id: undefined,
+        product_id: product.id,
+        state,
+      }).one();
+      const enrollment = EnrollmentFactory({
+        orders: [order],
+        course_run: CourseRunFactory({ course }).one(),
+      }).one();
+      render(<ProductCertificateFooter product={product} enrollment={enrollment} />);
+      expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+      expect(screen.getByTestId('PurchaseButton__cta')).toBeInTheDocument();
+    },
+  );
 
   it('should not display button (download or purchase) for a course run with order but without certificate.', () => {
     const order = OrderEnrollmentFactory({

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -2,7 +2,12 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
 import PurchaseButton from 'components/PurchaseButton';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import { CertificateProduct, Enrollment, OrderState, ProductType } from 'types/Joanie';
+import {
+  CertificateProduct,
+  Enrollment,
+  ProductType,
+  PURCHASABLE_ORDER_STATES,
+} from 'types/Joanie';
 import DownloadCertificateButton from 'components/DownloadCertificateButton';
 import { useCertificate } from 'hooks/useCertificates';
 import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
@@ -51,7 +56,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
     <div className="dashboard-item__course-enrolling__infos">
       <div className="dashboard-item__block__status">
         <Icon name={IconTypeEnum.CERTIFICATE} />
-        {order?.state === OrderState.VALIDATED ? (
+        {OrderHelper.isActive(order) ? (
           <>
             {product.certificate_definition.title + '. '}
             <CertificateStatus certificate={certificate} productType={product.type} />
@@ -60,11 +65,11 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           <FormattedMessage {...messages.buyProductCertificateLabel} />
         )}
       </div>
-      {order?.state === OrderState.VALIDATED ? (
-        order.certificate_id && (
+      {OrderHelper.isActive(order) ? (
+        order!.certificate_id && (
           <DownloadCertificateButton
             className="dashboard-item__button"
-            certificateId={order.certificate_id}
+            certificateId={order!.certificate_id}
           />
         )
       ) : (
@@ -73,7 +78,7 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           product={product}
           enrollment={enrollment}
           buttonProps={{ size: 'small' }}
-          disabled={order?.state === OrderState.SUBMITTED}
+          disabled={order && !PURCHASABLE_ORDER_STATES.includes(order.state)}
           onFinish={(o) => {
             /**
              * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.spec.tsx

@@ -22,8 +22,8 @@ import {
   CourseLightFactory,
   CourseRunFactory,
   CredentialOrderFactory,
-  CredentialOrderWithPaymentFactory,
   EnrollmentFactory,
+  PaymentFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
 import {
@@ -91,7 +91,7 @@ describe('<DashboardItemOrder/>', () => {
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
-    await screen.findByText('Pending');
+    await screen.findByText('Pending for the first direct debit');
     await screen.findByRole('link', { name: 'View details' });
   });
 
@@ -119,7 +119,7 @@ describe('<DashboardItemOrder/>', () => {
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
-    await screen.findByText('Completed');
+    await screen.findByText('Successfully completed');
     await screen.findByRole('link', { name: 'View details' });
     await expectSpinner('Loading certificate...');
     deferred.resolve(certificate);
@@ -138,7 +138,7 @@ describe('<DashboardItemOrder/>', () => {
 
     await screen.findByRole('heading', { level: 5, name: product.title });
     await screen.findByText('Ref. ' + (order.course as CourseLight).code);
-    await screen.findByText('Completed');
+    await screen.findByText('Successfully completed');
     await screen.findByRole('link', { name: 'View details' });
     await expectNoSpinner('Loading certificate ...');
   });
@@ -870,7 +870,8 @@ describe('<DashboardItemOrder/>', () => {
   });
 
   it('renders a writable order with failed payment and retry it successfully', async () => {
-    const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
+    const order = CredentialOrderFactory().one();
+    const paymentInfo = PaymentFactory().one();
 
     const validOrder = { ...order };
     validOrder.payment_schedule = [
@@ -921,7 +922,7 @@ describe('<DashboardItemOrder/>', () => {
     screen.getByText(
       /The payment failed, please choose another payment method or add a new one during the payment/,
     );
-    screen.getByText('Use another credit card during payment');
+    screen.getByText('Use another credit card');
 
     // Prepare for cache invalidation.
     fetchMock.get(

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -164,13 +164,16 @@ export const DashboardItemOrder = ({
     course_id: course.code,
   });
   const { product } = courseProductRelation || {};
-  const needsSignature = OrderHelper.orderNeedsSignature(order, product?.contract_definition);
+  const needsSignature = OrderHelper.orderNeedsSignature(order);
+  const canEnroll = OrderHelper.allowEnrollment(order);
+
+  if (!product) return null;
 
   return (
     <div className="dashboard-item-order">
       <DashboardItem
         data-testid={`dashboard-item-order-${order.id}`}
-        title={product?.title ?? ''}
+        title={product.title}
         code={'Ref. ' + course.code}
         imageUrl={course.cover?.src}
         more={
@@ -185,10 +188,7 @@ export const DashboardItemOrder = ({
             <div className="dashboard-item-order__footer">
               <div className="dashboard-item__block__status">
                 <Icon name={IconTypeEnum.SCHOOL} />
-                <OrderStateLearnerMessage
-                  order={order}
-                  contractDefinition={product?.contract_definition}
-                />
+                <OrderStateLearnerMessage order={order} />
               </div>
               {showDetailsButton && (
                 <RouterButton
@@ -206,7 +206,7 @@ export const DashboardItemOrder = ({
                 key={`DashboardItemOrderContract_${order.id}`}
                 title={product.title}
                 order={order}
-                contract_definition={product?.contract_definition!}
+                contract_definition={product.contract_definition!}
                 contract={order.contract}
                 writable={writable}
                 mode="compact"
@@ -224,7 +224,6 @@ export const DashboardItemOrder = ({
                   writable={writable}
                   course={targetCourse}
                   order={order}
-                  product={product}
                   activeEnrollment={CoursesHelper.findActiveCourseEnrollmentInOrder(
                     targetCourse,
                     order,
@@ -232,7 +231,7 @@ export const DashboardItemOrder = ({
                   notEnrolledUrl={generatePath(LearnerDashboardPaths.ORDER, {
                     orderId: order.id,
                   })}
-                  hideEnrollButtons={needsSignature}
+                  hideEnrollButtons={!canEnroll}
                 />
               }
             />
@@ -397,7 +396,7 @@ const ContractItem = ({ product, order }: { order: CredentialOrder; product: Pro
     return;
   }
 
-  const needsSignature = OrderHelper.orderNeedsSignature(order, product.contract_definition);
+  const needsSignature = OrderHelper.orderNeedsSignature(order);
   return (
     <div
       id={`dashboard-item-contract-${order.id}`}

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

@@ -3,7 +3,7 @@ import { faker } from '@faker-js/faker';
 import { screen } from '@testing-library/react';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
-import { CourseLight } from 'types/Joanie';
+import { CourseLight, OrderState } from 'types/Joanie';
 import {
   ContractDefinitionFactory,
   ContractFactory,
@@ -124,6 +124,7 @@ describe('<DashboardItemOrder/> Contract', () => {
 
     it('renders a non-writable order with a contract not signed yet', async () => {
       const order = CredentialOrderFactory({
+        state: OrderState.TO_SIGN,
         target_courses: TargetCourseFactory().many(1),
         target_enrollments: [],
         contract: ContractFactory({ student_signed_on: undefined }).one(),
@@ -186,6 +187,7 @@ describe('<DashboardItemOrder/> Contract', () => {
     });
     it('renders a writable order with a contract not signed yet', async () => {
       const order = CredentialOrderFactory({
+        state: OrderState.TO_SIGN,
         target_courses: TargetCourseFactory().many(1),
         target_enrollments: [],
         contract: null,

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

@@ -19,6 +19,7 @@ import { render } from 'utils/test/render';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { OrderState } from 'types/Joanie';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -49,9 +50,10 @@ describe('<DashboardItemOrder/> Contract', () => {
   describe('writable', () => {
     it('successfully sign a contract', async () => {
       const order = CredentialOrderFactory({
+        state: OrderState.TO_SIGN,
         target_courses: TargetCourseFactory().many(1),
         target_enrollments: [],
-        contract: ContractFactory({ student_signed_on: undefined }).one(),
+        contract: ContractFactory({ student_signed_on: null }).one(),
       }).one();
 
       // learner dashboard course page do one call to course product relation per order
@@ -82,6 +84,7 @@ describe('<DashboardItemOrder/> Contract', () => {
         `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`,
         submitDeferred.promise,
       );
+      fetchMock.post(`https://joanie.endpoint/api/v1.0/signature/notifications/`, 200);
 
       // delay: null is needed because as we are using fake timers it would mock the timers of
       // RTL too. See https://github.com/testing-library/user-event/issues/833.
@@ -92,11 +95,7 @@ describe('<DashboardItemOrder/> Contract', () => {
       });
 
       await expectNoSpinner('Loading orders and enrollments...');
-
-      expect(
-        await screen.findByRole('heading', { level: 5, name: product.title }),
-      ).toBeInTheDocument();
-
+      await screen.findByRole('heading', { level: 5, name: product.title });
       // Make sure the sign button is shown.
       await user.click(screen.getByRole('link', { name: 'Sign' }));
 
@@ -212,7 +211,7 @@ describe('<DashboardItemOrder/> Contract', () => {
       // We have the success message.
       await screen.findByRole('heading', { name: 'Congratulations!' });
       screen.getByText(
-        'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
+        'You will receive an email once your contract will be fully signed. You can now finalize your subscription.',
       );
       const nextButton = screen.getByRole('button', { name: 'Next' });
 

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

@@ -1,6 +1,7 @@
 import {
   Alert,
   Button,
+  Loader,
   Modal,
   ModalProps,
   ModalSize,
@@ -8,12 +9,14 @@ import {
   VariantType,
 } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { CreditCard, Order } from 'types/Joanie';
 import { CreditCardSelector } from 'components/CreditCardSelector';
 import { OrderHelper } from 'utils/OrderHelper';
 import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
+import { Maybe } from 'types/utils';
+import { useCreditCard } from 'hooks/useCreditCards';
 
 const messages = defineMessages({
   title: {
@@ -57,7 +60,7 @@ export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps)
         <h3 className="order-payment-details__title mb-s">
           <FormattedMessage {...messages.paymentMethodTitle} />
         </h3>
-        <CreditCardSelectorWrapper />
+        <CreditCardSelectorWrapper selectedCreditCardId={order.credit_card_id} />
         <h3 className="order-payment-details__title mb-s mt-b">
           <FormattedMessage {...messages.scheduleTitle} />
         </h3>
@@ -91,14 +94,31 @@ export const OrderPaymentDetailsModal = ({ order, ...props }: PaymentModalProps)
   );
 };
 
-const CreditCardSelectorWrapper = () => {
-  // TODO: At the moment is automatically selects the default credit card but it must select the credit card used to
-  // buy the order.
-  const [creditCard, setCreditCard] = useState<CreditCard>();
+const CreditCardSelectorWrapper = ({
+  selectedCreditCardId,
+}: {
+  selectedCreditCardId: Maybe<string>;
+}) => {
+  const {
+    item: creditCard,
+    states: { fetching },
+  } = useCreditCard(selectedCreditCardId);
+  const [selectedCreditCard, setSelectedCreditCard] = useState<Maybe<CreditCard>>(creditCard);
+
+  useEffect(() => {
+    if (!selectedCreditCard && creditCard) {
+      setSelectedCreditCard(creditCard);
+    }
+  }, [creditCard]);
+
+  if (fetching) {
+    return <Loader size="small" />;
+  }
+
   return (
     <CreditCardSelector
-      creditCard={creditCard}
-      setCreditCard={setCreditCard}
+      creditCard={selectedCreditCard || creditCard}
+      setCreditCard={setSelectedCreditCard}
       quickRemove={false}
       allowEdit={false}
     />

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

@@ -9,7 +9,7 @@ import {
 } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useRef, useState } from 'react';
-import { CreditCard, Order, PaymentInstallment, OrderState } from 'types/Joanie';
+import { CreditCard, Order, PaymentInstallment, ACTIVE_ORDER_STATES } from 'types/Joanie';
 import { CreditCardSelector } from 'components/CreditCardSelector';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
 import { Payment, PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
@@ -111,10 +111,7 @@ export const OrderPaymentRetryModal = ({ installment, order, ...props }: Props)
 
   const isOrderValidated = async (id: string): Promise<Boolean> => {
     const orderToCheck = await API.user.orders.get({ id });
-    return (
-      orderToCheck?.state === OrderState.VALIDATED ||
-      orderToCheck?.state === OrderState.PENDING_PAYMENT
-    );
+    return orderToCheck !== null && ACTIVE_ORDER_STATES.includes(orderToCheck.state);
   };
 
   const settled = async () => {

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

@@ -1,11 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { screen } from '@testing-library/react';
 import { createIntl } from 'react-intl';
-import {
-  ContractDefinitionFactory,
-  ContractFactory,
-  CredentialOrderFactory,
-} from 'utils/test/factories/joanie';
+import { CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
 import { render } from 'utils/test/render';
 import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
@@ -13,86 +9,37 @@ import OrderStateLearnerMessage, { messages } from '.';
 
 const intl = createIntl({ locale: 'en' });
 
-describe('<DashboardItemOrder/>', () => {
+describe('<OrderStateLearnerMessage/>', () => {
   it.each([
-    [OrderState.DRAFT, 'Draft'],
-    [OrderState.SUBMITTED, 'Submitted'],
-    [OrderState.PENDING, 'Pending'],
+    [OrderState.ASSIGNED, 'Pending'],
     [OrderState.CANCELED, 'Canceled'],
-  ])(
-    'should display message from order state: %s when order have no contract',
-    (state, expectedMessage) => {
-      const order = CredentialOrderFactory({ state }).one();
-      render(<OrderStateLearnerMessage order={order} />, {
-        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-      });
-      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
-    },
-  );
-
-  it.each([
-    [OrderState.DRAFT, 'Draft'],
-    [OrderState.SUBMITTED, 'Submitted'],
-    [OrderState.PENDING, 'Pending'],
-    [OrderState.CANCELED, 'Canceled'],
-  ])(
-    'should display message from order state: %s when order have no contract',
-    (state, expectedMessage) => {
-      const orderWithContract = CredentialOrderFactory({
-        state,
-        contract: ContractFactory().one(),
-      }).one();
-      render(<OrderStateLearnerMessage order={orderWithContract} />, {
-        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-      });
-      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
-    },
-  );
-
-  it('should display message for validated order that need learner signature', () => {
-    const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      contract: null,
-    }).one();
-
-    const contractDefinition = ContractDefinitionFactory().one();
-
-    render(<OrderStateLearnerMessage order={order} contractDefinition={contractDefinition} />, {
-      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-    });
-    expect(screen.getByText('Signature required')).toBeInTheDocument();
-  });
-
-  it("should display message for validated order that don't have a generated certificate", () => {
-    const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
-      certificate_id: undefined,
-    }).one();
+    [OrderState.COMPLETED, 'On going'],
+    [OrderState.DRAFT, 'Pending'],
+    [OrderState.FAILED_PAYMENT, 'Last direct debit has failed'],
+    [OrderState.NO_PAYMENT, 'First direct debit has failed'],
+    [OrderState.PENDING, 'Pending for the first direct debit'],
+    [OrderState.PENDING_PAYMENT, 'On going'],
+    [OrderState.SIGNING, 'Signature required'],
+    [OrderState.TO_SAVE_PAYMENT_METHOD, 'Payment method is missing'],
+    [OrderState.TO_SIGN, 'Signature required'],
+  ])('should display message from order state: %s', (state, expectedMessage) => {
+    const order = CredentialOrderFactory({ state }).one();
     render(<OrderStateLearnerMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
-    expect(
-      screen.getByText(intl.formatMessage(messages.statusOnGoing), {
-        exact: false,
-      }),
-    );
+    expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 
-  it('should display message for validated order that have a generated certificate', () => {
+  it('should display message for completed order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      contract: ContractFactory({
-        student_signed_on: new Date().toISOString(),
-        organization_signed_on: new Date().toISOString(),
-      }).one(),
+      state: OrderState.COMPLETED,
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
     render(<OrderStateLearnerMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
     expect(
-      screen.getByText(intl.formatMessage(messages.statusCompleted), {
+      screen.getByText(intl.formatMessage(messages.statusPassed), {
         exact: false,
       }),
     );

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

@@ -1,71 +1,70 @@
 import { defineMessages } from 'react-intl';
-import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+import OrderStateMessage, { OrderStateMessageBaseProps, MessageKeys } from '../OrderStateMessage';
 
-export const messages = defineMessages({
+export const messages = defineMessages<MessageKeys>({
   statusDraft: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusDraft',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusDraft',
     description: 'Status shown on the dashboard order item when order is draft.',
-    defaultMessage: 'Draft',
+    defaultMessage: 'Pending',
   },
-  statusSubmitted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusSubmitted',
-    description: 'Status shown on the dashboard order item when order is submitted.',
-    defaultMessage: 'Submitted',
+  statusAssigned: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusAssigned',
+    description: 'Status shown on the dashboard order item when order is assigned.',
+    defaultMessage: 'Pending',
   },
   statusPending: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusPending',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusPending',
     description: 'Status shown on the dashboard order item when order is pending.',
-    defaultMessage: 'Pending',
+    defaultMessage: 'Pending for the first direct debit',
   },
-  statusOnGoing: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOnGoing',
-    description:
-      'Status shown on the dashboard order item when order is validated with no certificate',
+  statusPendingPayment: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusPendingPayment',
+    description: 'Status shown on the dashboard order item when order is pending for payment',
     defaultMessage: 'On going',
   },
   statusCompleted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCompleted',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate',
-    defaultMessage: 'Completed',
-  },
-  statusPendingPayment: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusPendingPayment',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate and pending payment',
-    defaultMessage: 'Completed',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusCompleted',
+    description: 'Status shown on the dashboard order item when order is completed',
+    defaultMessage: 'On going',
   },
   statusWaitingSignature: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingSignature',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusWaitingSignature',
     description:
       "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
     defaultMessage: 'Signature required',
   },
   statusWaitingCounterSignature: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingCounterSignature',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusWaitingCounterSignature',
     description:
       "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
     defaultMessage: 'On going',
   },
+  statusWaitingPaymentMethod: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusWaitingPaymentMethod',
+    description:
+      'Status shown on the dashboard order item when order is in to_save_payment_method state.',
+    defaultMessage: 'Payment method is missing',
+  },
   statusCanceled: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCanceled',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusCanceled',
     description: 'Status shown on the dashboard order item when order is canceled',
     defaultMessage: 'Canceled',
   },
   statusNoPayment: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusNoPayment',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusNoPayment',
     description: 'Status shown on the dashboard order item when order is in no payment state',
-    defaultMessage: 'Failed payment',
+    defaultMessage: 'First direct debit has failed',
   },
   statusFailedPayment: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusFailedPayment',
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusFailedPayment',
     description: 'Status shown on the dashboard order item when order is in failed payment state',
-    defaultMessage: 'Failed payment',
+    defaultMessage: 'Last direct debit has failed',
   },
-  statusOther: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOther',
-    description: 'Status shown on the dashboard order item when order status is unknown',
-    defaultMessage: '{state}',
+  statusPassed: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusPassed',
+    description:
+      'Status shown on the dashboard order item when order is completed and has a certificate',
+    defaultMessage: 'Successfully completed',
   },
 });