richie-education 2.29.1-dev32 → 2.29.1-dev37

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

@@ -1,23 +1,16 @@
 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';
+import { CredentialOrder, OrderState } from 'types/Joanie';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { CoursesHelper } from 'utils/CoursesHelper';
-import { useCertificate } from 'hooks/useCertificates';
-import { Spinner } from 'components/Spinner';
 import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
-import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate';
 import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { OrderHelper } from 'utils/OrderHelper';
-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 OrganizationBlock from 'widgets/Dashboard/components/DashboardItem/Order/OrganizationBlock';
+import CertificateItem from 'widgets/Dashboard/components/DashboardItem/Order/CertificateItem';
+import { ProductHelper } from 'utils/ProductHelper';
 import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
@@ -30,80 +23,32 @@ const messages = defineMessages({
     description: 'Button that redirects to the order details',
     defaultMessage: 'View details',
   },
-  loadingCertificate: {
-    id: 'components.DashboardItemOrder.loadingCertificate',
-    description: 'Accessible label displayed while certificate is being fetched on the dashboard.',
-    defaultMessage: 'Loading certificate...',
-  },
   syllabusLinkLabel: {
     id: 'components.DashboardItemOrder.syllabusLinkLabel',
     description: 'Syllabus link label on order details',
     defaultMessage: 'Go to syllabus',
   },
-  contactDescription: {
-    id: 'components.DashboardItemOrder.contactDescription',
-    description: 'Description of the contact information for the organization',
-    defaultMessage: 'Your training reference is {name} - {email}.',
-  },
-  contactButton: {
-    id: 'components.DashboardItemOrder.contactButton',
-    description: 'Button to contact the organization',
-    defaultMessage: 'Contact',
-  },
-  organizationHeader: {
-    id: 'components.DashboardItemOrder.organizationHeader',
-    description: 'Header of the organization section',
-    defaultMessage: 'This training is provided by',
-  },
-  organizationLogoAlt: {
-    id: 'components.DashboardItemOrder.organizationLogoAlt',
-    description: 'Alt text for the organization logo',
-    defaultMessage: 'Logo of the organization',
-  },
-  trainingContractTitle: {
-    id: 'components.DashboardItemOrder.trainingContractTitle',
-    description: 'Title of the training contract section',
-    defaultMessage: 'Training contract',
-  },
-  organizationMailContactLabel: {
-    id: 'components.DashboardItemOrder.organizationMailContactLabel',
-    description: 'Label for the organization mail contact',
-    defaultMessage: 'Email',
-  },
-  organizationPhoneContactLabel: {
-    id: 'components.DashboardItemOrder.organizationPhoneContactLabel',
-    description: 'Label for the organization phone contact',
-    defaultMessage: 'Phone',
+  missingPaymentMethodTitle: {
+    id: 'components.DashboardItemOrder.missingPaymentMethodTitle',
+    description: 'Main message displayed when the order is missing a payment method',
+    defaultMessage: 'A payment method is missing',
   },
-  organizationDpoContactLabel: {
-    id: 'components.DashboardItemOrder.organizationDpoContactLabel',
-    description: 'Label for the organization DPO contact',
-    defaultMessage: 'Data protection email',
+  missingPaymentMethodDescription: {
+    id: 'components.DashboardItemOrder.missingPaymentMethodDescription',
+    description: 'Description message displayed when the order is missing a payment method',
+    defaultMessage: 'You must define a payment method to finalize your subscription.',
   },
-  paymentTitle: {
-    id: 'components.DashboardItemOrder.paymentTitle',
-    description: 'Label for the payment block',
-    defaultMessage: 'Payment',
+  missingPaymentMethodCTA: {
+    id: 'components.DashboardItemOrder.missingPaymentMethodCTA',
+    description: 'CTA label displayed when the order is missing a payment method',
+    defaultMessage: 'Define',
   },
-  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}',
+  notResumable: {
+    id: 'components.DashboardItemOrder.notResumable',
+    description:
+      'Message displayed when the order subscription is not completed but the product is no more purchasable',
+    defaultMessage:
+      'The subscription process cannot be resumed. The related training is no more purchasable.',
   },
 });
 
@@ -114,50 +59,13 @@ interface DashboardItemOrderProps {
   writable?: boolean;
 }
 
-interface DashboardItemOrderCertificateProps {
-  order: CredentialOrder;
-  product: Product;
-}
-
-const DashboardItemOrderCertificate = ({ order, product }: DashboardItemOrderCertificateProps) => {
-  if (!order.certificate_id) {
-    return (
-      <DashboardItemCertificate
-        certificateDefinition={product.certificate_definition}
-        productType={product.type}
-        mode="compact"
-      />
-    );
-  }
-  const certificate = useCertificate(order.certificate_id);
-  return (
-    <>
-      {certificate.states.fetching && (
-        <Spinner aria-labelledby="loading-certificate">
-          <span id="loading-certificate">
-            <FormattedMessage {...messages.loadingCertificate} />
-          </span>
-        </Spinner>
-      )}
-      {certificate.item && (
-        <DashboardItemCertificate
-          certificate={certificate.item}
-          productType={product.type}
-          mode="compact"
-        />
-      )}
-    </>
-  );
-};
-
 export const DashboardItemOrder = ({
   order,
   showDetailsButton = true,
   showCertificate,
   writable = false,
 }: DashboardItemOrderProps) => {
-  const course = order.course as CourseLight;
-
+  const { course } = order;
   const intl = useIntl();
   const { item: courseProductRelation } = useCourseProduct({
     product_id: order.product_id,
@@ -165,6 +73,10 @@ export const DashboardItemOrder = ({
   });
   const { product } = courseProductRelation || {};
   const needsSignature = OrderHelper.orderNeedsSignature(order);
+  const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
+  const isActive = OrderHelper.isActive(order);
+  const isProductPurchasable = ProductHelper.isPurchasable(courseProductRelation?.product);
+  const isNotResumable = !isActive && !isProductPurchasable;
   const canEnroll = OrderHelper.allowEnrollment(order);
 
   if (!product) return null;
@@ -187,10 +99,19 @@ export const DashboardItemOrder = ({
           <>
             <div className="dashboard-item-order__footer">
               <div className="dashboard-item__block__status">
-                <Icon name={IconTypeEnum.SCHOOL} />
-                <OrderStateLearnerMessage order={order} />
+                {isNotResumable ? (
+                  <>
+                    <Icon name={IconTypeEnum.ROUND_CLOSE} size="small" />
+                    <FormattedMessage {...messages.notResumable} />
+                  </>
+                ) : (
+                  <>
+                    <Icon name={IconTypeEnum.SCHOOL} />
+                    <OrderStateLearnerMessage order={order} />
+                  </>
+                )}
               </div>
-              {showDetailsButton && (
+              {!isNotResumable && showDetailsButton && (
                 <RouterButton
                   size="small"
                   className="dashboard-item__button"
@@ -201,7 +122,7 @@ export const DashboardItemOrder = ({
                 </RouterButton>
               )}
             </div>
-            {!writable && needsSignature && (
+            {!writable && isProductPurchasable && needsSignature && (
               <DashboardItemContract
                 key={`DashboardItemOrderContract_${order.id}`}
                 title={product.title}
@@ -212,217 +133,75 @@ export const DashboardItemOrder = ({
                 mode="compact"
               />
             )}
+            {!writable && isProductPurchasable && needsPaymentMethod && (
+              <DashboardItem
+                title=""
+                data-testid={`dashboard-item-payment-method-${order.id}`}
+                mode="compact"
+                footer={
+                  <>
+                    <div className="dashboard-contract__body">
+                      <Icon name={IconTypeEnum.CREDIT_CARD} />
+                      <span>
+                        <FormattedMessage {...messages.missingPaymentMethodTitle} />
+                      </span>
+                    </div>
+                    <div className="dashboard-contract__footer">
+                      <span className="dashboard-contract__footer__status">
+                        <FormattedMessage {...messages.missingPaymentMethodDescription} />
+                      </span>
+                      <div>
+                        <RouterButton
+                          size="small"
+                          href={generatePath(LearnerDashboardPaths.ORDER, {
+                            orderId: order.id,
+                          })}
+                          className="dashboard-item__button"
+                        >
+                          <FormattedMessage {...messages.missingPaymentMethodCTA} />
+                        </RouterButton>
+                      </div>
+                    </div>
+                  </>
+                }
+              />
+            )}
           </>
         }
       >
-        <DashboardSubItemsList
-          subItems={order.target_courses?.map((targetCourse) => (
-            <DashboardSubItem
-              title={targetCourse.title}
-              footer={
-                <DashboardItemCourseEnrolling
-                  writable={writable}
-                  course={targetCourse}
-                  order={order}
-                  activeEnrollment={CoursesHelper.findActiveCourseEnrollmentInOrder(
-                    targetCourse,
-                    order,
-                  )}
-                  notEnrolledUrl={generatePath(LearnerDashboardPaths.ORDER, {
-                    orderId: order.id,
-                  })}
-                  hideEnrollButtons={!canEnroll}
-                />
-              }
-            />
-          ))}
-        />
-      </DashboardItem>
-      {showCertificate && !!product?.certificate_definition && (
-        <DashboardItemOrderCertificate order={order} product={product} />
-      )}
-      {writable && <OrganizationBlock order={order} product={product} />}
-    </div>
-  );
-};
-
-const OrganizationBlock = ({ order, product }: { order: CredentialOrder; product: Product }) => {
-  const { organization } = order;
-  if (!organization) {
-    return null;
-  }
-
-  const showContactsBlock =
-    organization.contact_email || organization.contact_phone || organization.dpo_email;
-
-  return (
-    <div className="dashboard-splitted-card mt-s" data-testid="organization-block">
-      <div className="dashboard-splitted-card__column order-organization__caption">
-        <div className="dashboard-item-order__organization">
-          <div className="dashboard-item-order__organization__header">
-            <FormattedMessage {...messages.organizationHeader} />
-          </div>
-          <div
-            className="dashboard-item-order__organization__logo"
-            style={{
-              backgroundImage: `url(${organization.logo?.src})`,
-            }}
+        {!isNotResumable && (
+          <DashboardSubItemsList
+            subItems={order.target_courses?.map((targetCourse) => (
+              <DashboardSubItem
+                title={targetCourse.title}
+                footer={
+                  <DashboardItemCourseEnrolling
+                    writable={writable}
+                    course={targetCourse}
+                    order={order}
+                    activeEnrollment={CoursesHelper.findActiveCourseEnrollmentInOrder(
+                      targetCourse,
+                      order,
+                    )}
+                    notEnrolledUrl={generatePath(LearnerDashboardPaths.ORDER, {
+                      orderId: order.id,
+                    })}
+                    hideEnrollButtons={!canEnroll}
+                  />
+                }
+              />
+            ))}
           />
-          <div className="dashboard-item-order__organization__name">{organization.title}</div>
-        </div>
-      </div>
-      <div className="dashboard-splitted-card__separator order-organization__separator" />
-      <div className="dashboard-splitted-card__column order-organization__items">
-        <ContractItem order={order} product={product} />
-        {showContactsBlock && (
-          <div className="dashboard-splitted-card__item">
-            <div className="dashboard-splitted-card__item__title">Contacts</div>
-            <div className="dashboard-splitted-card__item__description">
-              {organization.contact_email && (
-                <div className="organization-block__contact__item">
-                  <FormattedMessage {...messages.organizationMailContactLabel} />
-                  <Button
-                    size="small"
-                    color="tertiary"
-                    href={'mailto:' + (organization.contact_email ?? '')}
-                  >
-                    {organization.contact_email}
-                  </Button>
-                </div>
-              )}
-              {organization.contact_phone && (
-                <div className="organization-block__contact__item">
-                  <FormattedMessage {...messages.organizationPhoneContactLabel} />
-                  <Button
-                    size="small"
-                    color="tertiary"
-                    href={'tel:' + (organization.contact_phone ?? '')}
-                  >
-                    {organization.contact_phone}
-                  </Button>
-                </div>
-              )}
-              {organization.dpo_email && (
-                <div className="organization-block__contact__item">
-                  <FormattedMessage {...messages.organizationDpoContactLabel} />
-                  <Button
-                    size="small"
-                    color="tertiary"
-                    href={'mailto:' + (organization.dpo_email ?? '')}
-                  >
-                    {organization.dpo_email}
-                  </Button>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-        {organization.address && (
-          <div className="dashboard-splitted-card__item dashboard-splitted-card__item__address">
-            <div className="dashboard-splitted-card__item__title">Address</div>
-            <div className="dashboard-splitted-card__item__description">
-              <AddressView address={organization.address} />
-            </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} />
+      </DashboardItem>
+      {!isNotResumable && (
+        <>
+          {showCertificate && !!product?.certificate_definition && (
+            <CertificateItem order={order} product={product} />
+          )}
+          {writable && <OrganizationBlock order={order} product={product} />}
+        </>
       )}
-    </>
-  );
-};
-
-const ContractItem = ({ product, order }: { order: CredentialOrder; product: Product }) => {
-  if (!product?.contract_definition) {
-    return;
-  }
-
-  const needsSignature = OrderHelper.orderNeedsSignature(order);
-  return (
-    <div
-      id={`dashboard-item-contract-${order.id}`}
-      className="dashboard-splitted-card__item"
-      data-testid={`dashboard-item-contract-${order.id}`}
-    >
-      <div
-        className={classNames('dashboard-splitted-card__item__title', {
-          'dashboard-splitted-card__item__title--dot': needsSignature,
-        })}
-      >
-        <span>
-          <FormattedMessage {...messages.trainingContractTitle} />
-        </span>
-      </div>
-      <div className="dashboard-splitted-card__item__description">
-        <ContractStatus contract={order.contract} />
-      </div>
-      <div className="dashboard-splitted-card__item__actions">
-        <SignContractButton
-          order={order}
-          contract={order.contract}
-          writable={true}
-          className="dashboard-item__button"
-        />
-      </div>
     </div>
   );
 };

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

@@ -1,9 +1,10 @@
 import fetchMock from 'fetch-mock';
 import { faker } from '@faker-js/faker';
-import { screen } from '@testing-library/react';
+import { screen, within } from '@testing-library/react';
+import queryString from 'query-string';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
-import { CourseLight, OrderState } from 'types/Joanie';
+import { CourseLight, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import {
   ContractDefinitionFactory,
   ContractFactory,
@@ -77,7 +78,9 @@ describe('<DashboardItemOrder/> Contract', () => {
       await screen.findByRole('heading', { level: 5, name: product.title });
 
       expect(
-        screen.queryByText('You have to sign this training contract to access your training.'),
+        screen.queryByText(
+          'You have to sign this training contract to finalize your subscription.',
+        ),
       ).not.toBeInTheDocument();
       expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
       expect(screen.getByText('On going')).toBeInTheDocument();
@@ -111,7 +114,9 @@ describe('<DashboardItemOrder/> Contract', () => {
       await screen.findByRole('heading', { level: 5, name: product.title });
 
       expect(
-        screen.queryByText('You have to sign this training contract to access your training.'),
+        screen.queryByText(
+          'You have to sign this training contract to finalize your subscription.',
+        ),
       ).not.toBeInTheDocument();
       expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
       expect(screen.getByText('On going')).toBeInTheDocument();
@@ -147,7 +152,7 @@ describe('<DashboardItemOrder/> Contract', () => {
 
       expect(screen.getByText('Ref. ' + (order.course as CourseLight).code)).toBeInTheDocument();
       expect(
-        screen.getByText('You have to sign this training contract to access your training.'),
+        screen.getByText('You have to sign this training contract to finalize your subscription.'),
       ).toBeInTheDocument();
       expect(screen.getByText('Signature required')).toBeInTheDocument();
       expect(screen.getByRole('link', { name: 'Sign' })).toBeInTheDocument();
@@ -174,6 +179,15 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
+      const orderQueryParameters = {
+        course_code: order.course.code,
+        product_id: order.product_id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const queryParams = queryString.stringify(orderQueryParameters);
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+      fetchMock.get(url, [order]);
+
       render(
         <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
         { wrapper: BaseJoanieAppWrapper },
@@ -201,6 +215,15 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
+      const orderQueryParameters = {
+        course_code: order.course.code,
+        product_id: order.product_id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const queryParams = queryString.stringify(orderQueryParameters);
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+      fetchMock.get(url, [order]);
+
       render(
         <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
         { wrapper: BaseJoanieAppWrapper },
@@ -212,7 +235,7 @@ describe('<DashboardItemOrder/> Contract', () => {
       expect(screen.getByText('Signature required')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign' })).toBeInTheDocument();
       expect(
-        screen.getByText('You have to sign this training contract to access your training.'),
+        screen.getByText('You have to sign this training contract to finalize your subscription.'),
       ).toBeInTheDocument();
 
       expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
@@ -222,7 +245,15 @@ describe('<DashboardItemOrder/> Contract', () => {
       expect($enrollButtons).toHaveLength(order.target_courses[0].course_runs.length);
       $enrollButtons.forEach(($button) => expect($button).toBeDisabled());
 
-      await expectBannerError('You need to sign your contract before enrolling in a course run');
+      await expectBannerError(
+        'You have to sign your training contract to finalize your subscription.',
+      );
+
+      // The payment block should not display information about the payment schedule
+      const paymentBlock = screen.getByTestId('dashboard-item-payment-method');
+      within(paymentBlock).getByText(
+        'You will able to manage your payment installment here once your subscription is finalized.',
+      );
     });
 
     it('renders a writable order with a signed contract', async () => {
@@ -242,6 +273,15 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
+      const orderQueryParameters = {
+        course_code: order.course.code,
+        product_id: order.product_id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const queryParams = queryString.stringify(orderQueryParameters);
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+      fetchMock.get(url, [order]);
+
       render(
         <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
         { wrapper: BaseJoanieAppWrapper },
@@ -254,7 +294,9 @@ describe('<DashboardItemOrder/> Contract', () => {
       expect(screen.getByText('On going')).toBeInTheDocument();
       expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
       expect(
-        screen.queryByText('You have to sign this training contract to access your training.'),
+        screen.queryByText(
+          'You have to sign this training contract to finalize your subscription.',
+        ),
       ).not.toBeInTheDocument();
 
       expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument();
@@ -286,6 +328,15 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
+      const orderQueryParameters = {
+        course_code: order.course.code,
+        product_id: order.product_id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const queryParams = queryString.stringify(orderQueryParameters);
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+      fetchMock.get(url, [order]);
+
       const DOWNLOAD_URL = `https://joanie.endpoint/api/v1.0/contracts/${
         order.contract!.id
       }/download/`;

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

@@ -3,6 +3,7 @@
 import fetchMock from 'fetch-mock';
 import { act, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import queryString from 'query-string';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import {
@@ -19,7 +20,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';
+import { NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -66,6 +67,16 @@ describe('<DashboardItemOrder/> Contract', () => {
         { overwriteRoutes: true },
       );
 
+      // overwrite useProductOrder call
+      const orderQueryParameters = {
+        course_code: order.course.code,
+        product_id: order.product_id,
+        state: NOT_CANCELED_ORDER_STATES,
+      };
+      const queryParams = queryString.stringify(orderQueryParameters);
+      const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+      fetchMock.get(url, [order]);
+
       // mock useUnionResources calls
       fetchMock.get('begin:https://joanie.endpoint/api/v1.0/enrollments/', {
         results: [],