richie-education 2.28.2-dev39 → 2.28.2-dev58

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';
@@ -98,7 +98,8 @@ export const OrderPaymentRetryModal = ({ installment, order, ...props }: Props)
         setError(intl.formatMessage(messages.errorFailedSubmitInstallmentPayment));
         setState(ComponentStates.ERROR);
       }
-    } catch (e) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_error) {
       setError(intl.formatMessage(messages.errorFailedSubmitInstallmentPayment));
       setState(ComponentStates.ERROR);
     }
@@ -111,10 +112,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',
   },
 });
 

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

@@ -1,26 +1,33 @@
 import { FormattedMessage, MessageDescriptor } from 'react-intl';
 import { useEffect } from 'react';
-import {
-  CertificateOrder,
-  CredentialOrder,
-  OrderState,
-  ContractDefinition,
-  NestedCourseOrder,
-} from 'types/Joanie';
+import { CertificateOrder, CredentialOrder, OrderState, NestedCourseOrder } from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 import { handle } from 'utils/errors/handle';
 import { OrderHelper, OrderStatus } from 'utils/OrderHelper';
 
 export interface OrderStateMessageBaseProps {
   order: CredentialOrder | CertificateOrder | NestedCourseOrder;
-  contractDefinition?: ContractDefinition;
 }
 
+export type MessageKeys =
+  | 'statusDraft'
+  | 'statusAssigned'
+  | 'statusPending'
+  | 'statusPendingPayment'
+  | 'statusCompleted'
+  | 'statusWaitingSignature'
+  | 'statusWaitingCounterSignature'
+  | 'statusWaitingPaymentMethod'
+  | 'statusCanceled'
+  | 'statusNoPayment'
+  | 'statusFailedPayment'
+  | 'statusPassed';
+
 interface OrderStateMessageProps extends OrderStateMessageBaseProps {
-  messages: Record<string, MessageDescriptor>;
+  messages: Record<MessageKeys, MessageDescriptor>;
 }
 
-const OrderStateMessage = ({ order, contractDefinition, messages }: OrderStateMessageProps) => {
+const OrderStateMessage = ({ order, messages }: OrderStateMessageProps) => {
   useEffect(() => {
     if (!Object.values(OrderState).includes(order.state)) {
       handle(new Error(`Unknown order state ${order.state}`));
@@ -28,27 +35,23 @@ const OrderStateMessage = ({ order, contractDefinition, messages }: OrderStateMe
   }, [order.state]);
 
   const orderStatusMessagesMap = {
-    [OrderStatus.DRAFT]: messages.statusDraft,
-    [OrderStatus.SUBMITTED]: messages.statusSubmitted,
-    [OrderStatus.PENDING]: messages.statusPending,
+    [OrderStatus.ASSIGNED]: messages.statusAssigned,
     [OrderStatus.CANCELED]: messages.statusCanceled,
-    [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,
-    [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
+    [OrderStatus.DRAFT]: messages.statusDraft,
     [OrderStatus.COMPLETED]: messages.statusCompleted,
-    [OrderStatus.ON_GOING]: messages.statusOnGoing,
+    [OrderStatus.FAILED_PAYMENT]: messages.statusFailedPayment,
     [OrderStatus.NO_PAYMENT]: messages.statusNoPayment,
+    [OrderStatus.PASSED]: messages.statusPassed,
+    [OrderStatus.PENDING]: messages.statusPending,
     [OrderStatus.PENDING_PAYMENT]: messages.statusPendingPayment,
-    [OrderStatus.FAILED_PAYMENT]: messages.statusFailedPayment,
+    [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
+    [OrderStatus.WAITING_PAYMENT_METHOD]: messages.statusWaitingPaymentMethod,
+    [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,
   };
-  const status = OrderHelper.getState(order, contractDefinition);
+  const status = OrderHelper.getState(order);
 
   if (status === null) {
-    return (
-      <FormattedMessage
-        {...messages.statusOther}
-        values={{ state: StringHelper.capitalizeFirst(order.state) }}
-      />
-    );
+    return StringHelper.capitalizeFirst(order.state);
   }
 
   return <FormattedMessage {...orderStatusMessagesMap[status]} />;

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/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 { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
 import { render } from 'utils/test/render';
 import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
@@ -15,100 +11,49 @@ const intl = createIntl({ locale: 'en' });
 
 describe('<OrderStateTeacherMessage/>', () => {
   it.each([
-    [OrderState.DRAFT, 'Pending'],
-    [OrderState.SUBMITTED, 'Pending'],
-    [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(<OrderStateTeacherMessage order={order} />, {
-        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-      });
-      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
-    },
-  );
-
-  it.each([
+    [OrderState.COMPLETED, 'On going'],
     [OrderState.DRAFT, 'Pending'],
-    [OrderState.SUBMITTED, 'Pending'],
-    [OrderState.PENDING, 'Pending'],
-    [OrderState.CANCELED, 'Canceled'],
-  ])(
-    'should display message from order state: %s when order have contract',
-    (state, expectedMessage) => {
-      const orderWithContract = CredentialOrderFactory({
-        state,
-        contract: ContractFactory().one(),
-      }).one();
-      render(
-        <OrderStateTeacherMessage
-          order={orderWithContract}
-          contractDefinition={ContractDefinitionFactory().one()}
-        />,
-        {
-          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(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
+    [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, "Pending for learner's signature"],
+    [OrderState.TO_SAVE_PAYMENT_METHOD, 'Payment method is missing'],
+    [OrderState.TO_SIGN, "Pending for learner's signature"],
+  ])('should display message from order state: %s', (state, expectedMessage) => {
+    const order = CredentialOrderFactory({ state }).one();
+    render(<OrderStateTeacherMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
-    expect(screen.getByText("Pending for learner's signature")).toBeInTheDocument();
+    expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 
   it('should display message for validated order that need organization signature', () => {
     const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
+      state: OrderState.PENDING_PAYMENT,
       contract: ContractFactory({
         student_signed_on: new Date().toISOString(),
       }).one(),
     }).one();
-    const contractDefinition = ContractDefinitionFactory().one();
-
-    render(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
-      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-    });
-    expect(screen.getByText('To be signed')).toBeInTheDocument();
-  });
 
-  it("should display message for validated order that don't have a generated certificate", () => {
-    const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      certificate_id: undefined,
-    }).one();
     render(<OrderStateTeacherMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
-    expect(
-      screen.getByText(intl.formatMessage(messages.statusOnGoing), {
-        exact: false,
-      }),
-    );
+    expect(screen.getByText('To be signed')).toBeInTheDocument();
   });
 
   it('should display message for validated order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
+      state: OrderState.COMPLETED,
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
     render(<OrderStateTeacherMessage 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/OrderStateTeacherMessage/index.tsx

@@ -1,33 +1,32 @@
 import { defineMessages } from 'react-intl';
-import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+import OrderStateMessage, { MessageKeys, OrderStateMessageBaseProps } from '../OrderStateMessage';
 
-export const messages = defineMessages({
+export const messages = defineMessages<MessageKeys>({
   statusDraft: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusDraft',
     description: 'Status shown on the dashboard order item when order is draft.',
     defaultMessage: 'Pending',
   },
-  statusSubmitted: {
-    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusSubmitted',
-    description: 'Status shown on the dashboard order item when order is submitted.',
+  statusAssigned: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusAssigned',
+    description: 'Status shown on the dashboard order item when order is assigned.',
     defaultMessage: 'Pending',
   },
   statusPending: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.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.OrderStateTeacherMessage.statusOnGoing',
+  statusPendingPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPendingPayment',
     description:
       'Status shown on the dashboard order item when order is validated with no certificate',
-    defaultMessage: 'Enrolled',
+    defaultMessage: 'On going',
   },
   statusCompleted: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCompleted',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate',
-    defaultMessage: 'Certified',
+    description: 'Status shown on the dashboard order item when order is completed',
+    defaultMessage: 'On going',
   },
   statusWaitingSignature: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingSignature',
@@ -35,6 +34,12 @@ export const messages = defineMessages({
       "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
     defaultMessage: "Pending for learner's signature",
   },
+  statusWaitingPaymentMethod: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingPaymentMethod',
+    description:
+      'Status shown on the dashboard order item when order is in to_save_payment_method state.',
+    defaultMessage: 'Payment method is missing',
+  },
   statusWaitingCounterSignature: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingCounterSignature',
     description:
@@ -46,10 +51,21 @@ export const messages = defineMessages({
     description: 'Status shown on the dashboard order item when order is canceled',
     defaultMessage: 'Canceled',
   },
-  statusOther: {
-    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOther',
-    description: 'Status shown on the dashboard order item when order status is unknown',
-    defaultMessage: '{state}',
+  statusNoPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusNoPayment',
+    description: 'Status shown on the dashboard order item when order is in no payment state',
+    defaultMessage: 'First direct debit has failed',
+  },
+  statusFailedPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusFailedPayment',
+    description: 'Status shown on the dashboard order item when order is in failed payment state',
+    defaultMessage: 'Last direct debit has failed',
+  },
+  statusPassed: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPassed',
+    description:
+      'Status shown on the dashboard order item when order is completed with certificate',
+    defaultMessage: 'Certified',
   },
 });
 

package/js/widgets/Dashboard/components/DashboardOrderLoader/index.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { useOmniscientOrder } from 'hooks/useOrders';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import { useCourseProduct } from 'hooks/useCourseProducts';
 import { isCredentialOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { handle } from 'utils/errors/handle';
 import { OrderHelper } from 'utils/OrderHelper';
@@ -39,10 +38,6 @@ export const DashboardOrderLoader = () => {
     item: order,
     states: { fetching: fetchingOrder, error: errorOrder },
   } = useOmniscientOrder(params.orderId);
-  const {
-    item: courseProduct,
-    states: { fetching: fetchingCourseProduct, error: errorCourseProduct },
-  } = useCourseProduct({ course_id: order?.course?.code, product_id: order?.product_id });
   const intl = useIntl();
 
   const credentialOrder = order && isCredentialOrder(order) ? order : undefined;
@@ -52,12 +47,9 @@ export const DashboardOrderLoader = () => {
       return intl.formatMessage(messages.wrongLinkedProductError);
     }
   }, [credentialOrder]);
-  const error = errorOrder || errorCourseProduct || wrongLinkedProductError;
-  const fetching = fetchingOrder || fetchingCourseProduct;
-  const needsSignature = OrderHelper.orderNeedsSignature(
-    order,
-    courseProduct?.product.contract_definition,
-  );
+  const error = errorOrder || wrongLinkedProductError;
+  const fetching = fetchingOrder;
+  const needsSignature = order ? OrderHelper.orderNeedsSignature(order) : false;
 
   return (
     <>