richie-education 2.28.2-dev26 → 2.28.2-dev53

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/index.tsx

@@ -9,7 +9,6 @@ import {
   CourseRun,
   CredentialOrder,
   Enrollment,
-  Product,
 } from 'types/Joanie';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
@@ -68,10 +67,11 @@ const messages = defineMessages({
     description: 'Text displayed when course runs list is loading',
     id: 'components.DashboardItemCourseEnrollingRun.courseRunsLoading',
   },
-  contractUnsigned: {
-    id: 'components.DashboardItemCourseEnrollingRun.contractUnsigned',
-    description: 'Message displayed as disabled button title when a contract needs to be signed.',
-    defaultMessage: 'You have to sign the training contract before enrolling to your course.',
+  cannotEnroll: {
+    id: 'components.DashboardItemCourseEnrollingRun.cannotEnroll',
+    description:
+      'Message displayed as disabled button title when the order state does not allow enrollment.',
+    defaultMessage: 'You cannot enroll yet to this training.',
   },
 });
 
@@ -81,7 +81,6 @@ interface DashboardItemCourseEnrollingProps {
   course: AbstractCourse;
   activeEnrollment?: Enrollment;
   order?: CredentialOrder;
-  product?: Product;
   writable: boolean;
   hideEnrollButtons?: boolean;
   icon?: boolean;
@@ -93,7 +92,6 @@ export const DashboardItemCourseEnrolling = ({
   activeEnrollment,
   writable,
   order,
-  product,
   icon = false,
   notEnrolledUrl = '#',
   hideEnrollButtons,
@@ -121,7 +119,6 @@ export const DashboardItemCourseEnrolling = ({
           course={course}
           enrollments={CoursesHelper.findCourseEnrollmentsInOrder(course, order)}
           order={order}
-          product={product}
         />
       )}
     </div>
@@ -132,14 +129,12 @@ interface DashboardItemCourseEnrollingRunsProps {
   course: AbstractCourse;
   enrollments: Enrollment[];
   order?: CredentialOrder;
-  product?: Product;
 }
 
 const DashboardItemCourseEnrollingRuns = ({
   course,
   enrollments,
   order,
-  product,
 }: DashboardItemCourseEnrollingRunsProps) => {
   const { enroll, isLoading, error } = useEnroll(enrollments, order);
 
@@ -176,7 +171,6 @@ const DashboardItemCourseEnrollingRuns = ({
           selected={data.selected}
           enroll={() => enroll(data.courseRun)}
           order={order}
-          product={product}
         />
       ))}
       {isLoading && (
@@ -200,7 +194,6 @@ interface DashboardItemCourseEnrollingRunProps {
   selected: boolean;
   enroll: () => void;
   order?: CredentialOrder | CertificateOrder;
-  product?: Product;
 }
 
 export const DashboardItemCourseEnrollingRun = ({
@@ -208,14 +201,11 @@ export const DashboardItemCourseEnrollingRun = ({
   selected,
   enroll,
   order,
-  product,
 }: DashboardItemCourseEnrollingRunProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
   const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
-  const haveToSignContract = order
-    ? OrderHelper.orderNeedsSignature(order, product?.contract_definition)
-    : false;
+  const canEnroll = OrderHelper.allowEnrollment(order);
   const isOpenedForEnrollment = useMemo(
     () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
     [courseRun],
@@ -266,11 +256,11 @@ export const DashboardItemCourseEnrollingRun = ({
       ) : (
         <div>
           <Button
-            disabled={!isOpenedForEnrollment || haveToSignContract}
+            disabled={!isOpenedForEnrollment || !canEnroll}
             color="tertiary"
             size="small"
             onClick={enroll}
-            title={haveToSignContract ? intl.formatMessage(messages.contractUnsigned) : ''}
+            title={!canEnroll ? intl.formatMessage(messages.cannotEnroll) : ''}
           >
             <FormattedMessage {...messages.enrollRun} />
           </Button>

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

@@ -21,11 +21,19 @@ import {
   CertificateFactory,
   CourseLightFactory,
   CourseRunFactory,
-  EnrollmentFactory,
   CredentialOrderFactory,
+  EnrollmentFactory,
+  PaymentFactory,
   TargetCourseFactory,
 } from 'utils/test/factories/joanie';
-import { Certificate, CourseLight, CourseRun, CredentialOrder, OrderState } from 'types/Joanie';
+import {
+  Certificate,
+  CourseLight,
+  CourseRun,
+  CredentialOrder,
+  OrderState,
+  PaymentScheduleState,
+} from 'types/Joanie';
 import { resolveAll } from 'utils/resolveAll';
 import { confirm } from 'utils/indirection/window';
 import { Priority } from 'types';
@@ -40,6 +48,7 @@ import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import { render } from 'utils/test/render';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { OrderHelper } from 'utils/OrderHelper';
 import { DashboardTest } from '../../DashboardTest';
 import { DashboardItemOrder } from './DashboardItemOrder';
 
@@ -53,8 +62,15 @@ jest.mock('utils/context', () => ({
 
 jest.mock('utils/indirection/window', () => ({
   confirm: jest.fn(() => true),
+  matchMedia: () => ({
+    matches: true,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+  }),
 }));
 
+jest.mock('../../../../../components/PaymentInterfaces');
+
 describe('<DashboardItemOrder/>', () => {
   setupJoanieSession();
 
@@ -75,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' });
   });
 
@@ -103,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);
@@ -122,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 ...');
   });
@@ -852,4 +868,97 @@ describe('<DashboardItemOrder/>', () => {
     within(block).getByText(new RegExp(order.organization?.address?.postcode!));
     within(block).getByText(new RegExp(order.organization?.address?.country!));
   });
+
+  it('renders a writable order with failed payment and retry it successfully', async () => {
+    const order = CredentialOrderFactory().one();
+    const paymentInfo = PaymentFactory().one();
+
+    const validOrder = { ...order };
+    validOrder.payment_schedule = [
+      { ...order.payment_schedule![0] },
+      { ...order.payment_schedule![1] },
+      { ...order.payment_schedule![2] },
+    ];
+    fetchMock
+      .post(
+        `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_installment_payment/`,
+        paymentInfo,
+      )
+      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, validOrder);
+
+    order.state = OrderState.FAILED_PAYMENT;
+    order.payment_schedule![1].state = PaymentScheduleState.REFUSED;
+
+    const formatPrice = (price: number, currency: string) =>
+      new Intl.NumberFormat('en', {
+        currency,
+        style: 'currency',
+      }).format(price);
+
+    const { product } = mockCourseProductWithOrder(order);
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/',
+      { results: [order], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+
+    render(
+      <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+      { wrapper: BaseJoanieAppWrapper },
+    );
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+    screen.getByText(/a payment failed, please update your payment method/i);
+    const failedInstallment = OrderHelper.getFailedInstallment(order)!;
+    const button = screen.getByRole('button', {
+      name: 'Pay ' + formatPrice(failedInstallment.amount, failedInstallment.currency),
+    });
+    const user = userEvent.setup();
+
+    await user.click(button);
+
+    // Retry modal is shown.
+    screen.getByText('Retry payment');
+    screen.getByText(
+      /The payment failed, please choose another payment method or add a new one during the payment/,
+    );
+    screen.getByText('Use another credit card');
+
+    // Prepare for cache invalidation.
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/',
+      { results: [validOrder], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+
+    // Click on pay button.
+    const payButton = screen.getByTestId('order-payment-retry-modal-submit-button');
+    expect(payButton.innerHTML.replace('&nbsp;', ' ')).toEqual(
+      'Pay ' +
+        formatPrice(failedInstallment.amount, failedInstallment.currency).replace(
+          /(\u202F|\u00a0)/g,
+          ' ',
+        ),
+    );
+    await user.click(payButton);
+    // Pay via mocked payment interface
+    screen.getByText('Payment interface component');
+    await user.click(screen.getByTestId('payment-success'));
+
+    // Make sure retry modal is closed.
+    expect(screen.queryByText('Retry payment')).not.toBeInTheDocument();
+
+    // Success modal is shown, close it.
+    screen.getByText('Payment successful');
+    screen.getByText('The payment was successful');
+    const okButton = screen.getByRole('button', { name: 'Ok' });
+    await user.click(okButton);
+
+    // Warning alert is not shown anymore.
+    await waitFor(() => {
+      expect(
+        screen.queryByText(/a payment failed, please update your payment method/i),
+      ).not.toBeInTheDocument();
+    });
+  });
 });

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

@@ -1,5 +1,5 @@
-import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
-import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Alert, Button, useModal, VariantType } from '@openfun/cunningham-react';
 import classNames from 'classnames';
 import { generatePath } from 'react-router-dom';
 import { CourseLight, CredentialOrder, Product } from 'types/Joanie';
@@ -16,6 +16,8 @@ import ContractStatus from 'components/ContractStatus';
 import SignContractButton from 'components/SignContractButton';
 import { AddressView } from 'components/Address';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { OrderPaymentDetailsModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentDetailsModal';
+import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
@@ -78,6 +80,31 @@ const messages = defineMessages({
     description: 'Label for the organization DPO contact',
     defaultMessage: 'Data protection email',
   },
+  paymentTitle: {
+    id: 'components.DashboardItemOrder.paymentTitle',
+    description: 'Label for the payment block',
+    defaultMessage: 'Payment',
+  },
+  paymentLabel: {
+    id: 'components.DashboardItemOrder.paymentLabel',
+    description: 'Label for the payment block',
+    defaultMessage: 'You can see and manage all installments.',
+  },
+  paymentButton: {
+    id: 'components.DashboardItemOrder.paymentButton',
+    description: 'Button label for the payment block',
+    defaultMessage: 'Manage payment',
+  },
+  paymentNeededMessage: {
+    id: 'components.DashboardItemOrder.paymentNeededMessage',
+    description: 'Message displayed when payment is needed',
+    defaultMessage: 'A payment failed, please update your payment method',
+  },
+  paymentNeededButton: {
+    id: 'components.DashboardItemOrder.paymentNeededButton',
+    description: 'Button label for the payment needed message',
+    defaultMessage: 'Pay {amount}',
+  },
 });
 
 interface DashboardItemOrderProps {
@@ -137,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={
@@ -158,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
@@ -179,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"
@@ -197,7 +224,6 @@ export const DashboardItemOrder = ({
                   writable={writable}
                   course={targetCourse}
                   order={order}
-                  product={product}
                   activeEnrollment={CoursesHelper.findActiveCourseEnrollmentInOrder(
                     targetCourse,
                     order,
@@ -205,7 +231,7 @@ export const DashboardItemOrder = ({
                   notEnrolledUrl={generatePath(LearnerDashboardPaths.ORDER, {
                     orderId: order.id,
                   })}
-                  hideEnrollButtons={needsSignature}
+                  hideEnrollButtons={!canEnroll}
                 />
               }
             />
@@ -299,17 +325,78 @@ const OrganizationBlock = ({ order, product }: { order: CredentialOrder; product
             </div>
           </div>
         )}
+        <Installment order={order} />
       </div>
     </div>
   );
 };
 
+const Installment = ({ order }: { order: CredentialOrder }) => {
+  const modal = useModal();
+  const retryModal = useModal();
+  const failedInstallment = OrderHelper.getFailedInstallment(order);
+  const intl = useIntl();
+
+  const pay = async () => {
+    retryModal.open();
+  };
+
+  return (
+    <>
+      <div className="dashboard-splitted-card__item">
+        <div
+          className={classNames('dashboard-splitted-card__item__title', {
+            'dashboard-splitted-card__item__title--dot': !!failedInstallment,
+          })}
+        >
+          <span>
+            <FormattedMessage {...messages.paymentTitle} />
+          </span>
+        </div>
+        {failedInstallment && (
+          <Alert
+            className="mb-t"
+            type={VariantType.ERROR}
+            buttons={
+              <Button size="small" onClick={pay}>
+                <FormattedMessage
+                  {...messages.paymentNeededButton}
+                  values={{
+                    amount: intl.formatNumber(failedInstallment.amount, {
+                      style: 'currency',
+                      currency: failedInstallment.currency,
+                    }),
+                  }}
+                />
+              </Button>
+            }
+          >
+            <FormattedMessage {...messages.paymentNeededMessage} />
+          </Alert>
+        )}
+        <div className="dashboard-splitted-card__item__description">
+          <FormattedMessage {...messages.paymentLabel} />
+        </div>
+        <div className="dashboard-splitted-card__item__actions">
+          <Button size="small" color="secondary" onClick={modal.open}>
+            <FormattedMessage {...messages.paymentButton} />
+          </Button>
+        </div>
+      </div>
+      <OrderPaymentDetailsModal {...modal} order={order} />
+      {failedInstallment && (
+        <OrderPaymentRetryModal {...retryModal} installment={failedInstallment} order={order} />
+      )}
+    </>
+  );
+};
+
 const ContractItem = ({ product, order }: { order: CredentialOrder; product: Product }) => {
   if (!product?.contract_definition) {
     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/_styles.scss

@@ -0,0 +1,7 @@
+.order-payment-details {
+  &__title {
+    font-weight: var(--c--theme--font--weights--bold);
+    font-size: var(--c--theme--font--sizes--l);
+    text-align: left;
+  }
+}