richie-education 3.5.1 → 3.5.2-dev6

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

@@ -16,9 +16,10 @@ import { useCertificate } from 'hooks/useCertificates';
 import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
 import { OrderHelper } from 'utils/OrderHelper';
 import { OrderPaymentRetryModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryModal';
+import { OrderWithdrawalModal } from 'widgets/Dashboard/components/DashboardItem/Order/OrderWithdrawalModal';
 import PaymentScheduleHelper from 'utils/PaymentScheduleHelper';
 import { useOrder } from 'hooks/useOrders';
-import useDateFormat from 'hooks/useDateFormat';
+import useDateFormat, { DATETIME_FORMAT } from 'hooks/useDateFormat';
 import CertificateStatus from '../../CertificateStatus';
 
 const messages = defineMessages({
@@ -58,6 +59,27 @@ const messages = defineMessages({
     description: 'Button label for the payment needed message',
     defaultMessage: 'Pay {amount}',
   },
+  withdrawalDescription: {
+    id: 'components.ProductCertificateFooter.withdrawalDescription',
+    description: 'Message displayed to offer the withdrawal of the certificate order',
+    defaultMessage:
+      "If you haven't accessed the exam yet, you can exercise your right of withdrawal until {date}.",
+  },
+  withdrawalButton: {
+    id: 'components.ProductCertificateFooter.withdrawalButton',
+    description: 'Button label to open the withdrawal request modal',
+    defaultMessage: 'I wish to withdraw',
+  },
+  pendingWithdrawalMessage: {
+    id: 'components.ProductCertificateFooter.pendingWithdrawalMessage',
+    description: 'Message displayed when a withdrawal request is being processed',
+    defaultMessage: 'Your withdrawal request has been recorded on {date} and is being processed.',
+  },
+  withdrawnMessage: {
+    id: 'components.ProductCertificateFooter.withdrawnMessage',
+    description: 'Message displayed once a withdrawal request has been confirmed',
+    defaultMessage: 'You withdrew from this order on {date}.',
+  },
 });
 
 export interface ProductCertificateFooterProps {
@@ -75,6 +97,8 @@ const ProductCertificateFooter = ({
     OrderHelper.getActiveEnrollmentOrder(enrollment.orders || [], product.id),
   );
   const isOrderActive = OrderHelper.isActive(order);
+  const isOrderWithdrawn = OrderHelper.isWithdrawn(order);
+  const isOrderVisible = isOrderActive || isOrderWithdrawn;
   const isPurchasable =
     OrderHelper.isPurchasable(order) && isOpenedCourseRunCertificate(enrollment.course_run.state);
   const isCertificateIssued = isOrderActive && Boolean(order!.certificate_id);
@@ -92,36 +116,46 @@ const ProductCertificateFooter = ({
   }
 
   return (
-    <div className="dashboard-item__course-enrolling__infos">
-      {!isOrderActive ? (
-        <ProductCertificateStatus />
-      ) : (
-        <OrderCertificateStatus order={order!} product={product} hasError={hasError} />
-      )}
-      {isCertificateIssued && (
-        <DownloadCertificateButton
+    <>
+      <div className="dashboard-item__course-enrolling__infos">
+        {!isOrderVisible ? (
+          <ProductCertificateStatus />
+        ) : (
+          <OrderCertificateStatus order={order!} product={product} hasError={hasError} />
+        )}
+        {isCertificateIssued && (
+          <DownloadCertificateButton
+            className="dashboard-item__button"
+            certificateId={order!.certificate_id!}
+          />
+        )}
+        <PurchaseButton
           className="dashboard-item__button"
-          certificateId={order!.certificate_id!}
+          product={product}
+          enrollment={enrollment}
+          isWithdrawable={isWithdrawable}
+          buttonProps={{ size: 'small' }}
+          disabled={!isPurchasable}
+          onFinish={(o) => {
+            /**
+             * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
+             * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
+             * update the active order in the enrollment in order to hide the buy button and display the download button.
+             */
+            setOrder(o);
+          }}
+        />
+        {hasError && <FailedInstallmentManager order={order!} updateOrder={setOrder} />}
+      </div>
+      {isOrderActive && order!.eligible_to_withdraw && (
+        <WithdrawalManager
+          order={order!}
+          product={product}
+          enrollment={enrollment}
+          updateOrder={setOrder}
         />
       )}
-      <PurchaseButton
-        className="dashboard-item__button"
-        product={product}
-        enrollment={enrollment}
-        isWithdrawable={isWithdrawable}
-        buttonProps={{ size: 'small' }}
-        disabled={!isPurchasable}
-        onFinish={(o) => {
-          /**
-           * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
-           * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
-           * update the active order in the enrollment in order to hide the buy button and display the download button.
-           */
-          setOrder(o);
-        }}
-      />
-      {hasError && <FailedInstallmentManager order={order!} updateOrder={setOrder} />}
-    </div>
+    </>
   );
 };
 
@@ -143,10 +177,20 @@ const OrderCertificateStatus = ({ order, product, hasError }: OrderCertificateSt
   const formatDate = useDateFormat();
   const nextInstallment = PaymentScheduleHelper.getPendingInstallment(order?.payment_schedule);
   const canAccessToExam = ![OrderState.PENDING, OrderState.NO_PAYMENT].includes(order.state);
+  const isPendingWithdrawal = order.state === OrderState.PENDING_WITHDRAW;
+  const isWithdrawn = OrderHelper.isWithdrawn(order);
+  let statusIcon = IconTypeEnum.CERTIFICATE;
+  if (hasError) {
+    statusIcon = IconTypeEnum.WARNING;
+  } else if (isPendingWithdrawal) {
+    statusIcon = IconTypeEnum.CLOCK;
+  } else if (isWithdrawn) {
+    statusIcon = IconTypeEnum.ROUND_CLOSE;
+  }
 
   return (
     <div className="dashboard-item__block__status">
-      <Icon name={hasError ? IconTypeEnum.WARNING : IconTypeEnum.CERTIFICATE} />
+      <Icon name={statusIcon} />
       <p>
         {hasError && (
           <>
@@ -156,12 +200,30 @@ const OrderCertificateStatus = ({ order, product, hasError }: OrderCertificateSt
             <br />
           </>
         )}
-        {canAccessToExam ? (
+        {isPendingWithdrawal && (
+          <>
+            <strong>
+              <FormattedMessage
+                {...messages.pendingWithdrawalMessage}
+                values={{ date: formatDate(order.withdrawn_requested_at) }}
+              />
+            </strong>
+            <br />
+          </>
+        )}
+        {isWithdrawn && (
+          <FormattedMessage
+            {...messages.withdrawnMessage}
+            values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+          />
+        )}
+        {!isWithdrawn && !isPendingWithdrawal && canAccessToExam && (
           <>
             {product.certificate_definition.title + '. '}
             <CertificateStatus certificate={certificate} productType={product.type} />
           </>
-        ) : (
+        )}
+        {!isWithdrawn && !isPendingWithdrawal && !canAccessToExam && (
           <FormattedMessage {...messages.examAccessBlocked} />
         )}
         {!hasError && nextInstallment && (
@@ -232,4 +294,44 @@ const FailedInstallmentManager = ({ order, updateOrder }: FailedInstallmentManag
   );
 };
 
+type WithdrawalManagerProps = {
+  order: OrderEnrollment;
+  product: CertificateProduct;
+  enrollment: Enrollment;
+  updateOrder: (order: Order) => void;
+};
+const WithdrawalManager = ({ order, product, enrollment, updateOrder }: WithdrawalManagerProps) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat(DATETIME_FORMAT);
+  const modal = useModal();
+
+  return (
+    <div className="dashboard-item__course-enrolling__infos">
+      <div className="dashboard-item__block__status">
+        <Icon name={IconTypeEnum.MONEY} />
+        <FormattedMessage
+          {...messages.withdrawalDescription}
+          values={{ date: formatDate(order.withdrawal_date_limit) }}
+        />
+      </div>
+      <Button
+        className="dashboard-item__course-enrolling__infos__withdrawal__button"
+        size="small"
+        color="brand"
+        variant="tertiary"
+        onClick={modal.open}
+      >
+        {intl.formatMessage(messages.withdrawalButton)}
+      </Button>
+      <OrderWithdrawalModal
+        {...modal}
+        order={order}
+        productTitle={product.title}
+        reference={enrollment.course_run.course.code}
+        onSuccess={updateOrder}
+      />
+    </div>
+  );
+};
+
 export default ProductCertificateFooter;

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

@@ -195,6 +195,28 @@ describe('<DashboardItemOrder/>', () => {
     });
   });
 
+  it('renders a withdrawn order without its active-course content', async () => {
+    const order: CredentialOrder = CredentialOrderFactory({
+      state: OrderState.CANCELED,
+      withdrawn_confirmation_at: '2026-01-15T10:00:00.000Z',
+    }).one();
+    const { product } = mockCourseProductWithOrder(order);
+
+    render(<DashboardItemOrder order={order} />);
+
+    await screen.findByRole('heading', { level: 5, name: product.title });
+    const withdrawnOnDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(order.withdrawn_confirmation_at!),
+    );
+    await screen.findByText(`Withdrawn On ${withdrawnOnDate}.`, { exact: false });
+    expect(screen.queryByRole('link', { name: 'View details' })).not.toBeInTheDocument();
+    order.target_courses.forEach((course) => {
+      expect(
+        screen.queryByRole('heading', { level: 6, name: course.title }),
+      ).not.toBeInTheDocument();
+    });
+  });
+
   it('renders a non-writable order with enrolled target course ', async () => {
     const order: CredentialOrder = CredentialOrderFactory({
       target_courses: TargetCourseFactory().many(1),

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

@@ -7,6 +7,7 @@ import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/Das
 import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { OrderHelper } from 'utils/OrderHelper';
+import useDateFormat from 'hooks/useDateFormat';
 import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
 import OrganizationBlock from 'widgets/Dashboard/components/DashboardItem/Order/OrganizationBlock';
 import CertificateItem from 'widgets/Dashboard/components/DashboardItem/Order/CertificateItem';
@@ -50,6 +51,11 @@ const messages = defineMessages({
     defaultMessage:
       'The subscription process cannot be resumed. The related training is no more purchasable.',
   },
+  withdrawnOn: {
+    id: 'components.DashboardItemOrder.withdrawnOn',
+    description: 'Date at which the withdrawal was confirmed',
+    defaultMessage: 'On {date}.',
+  },
 });
 
 interface DashboardItemOrderProps {
@@ -67,6 +73,7 @@ export const DashboardItemOrder = ({
 }: DashboardItemOrderProps) => {
   const { course } = order;
   const intl = useIntl();
+  const formatDate = useDateFormat();
   const { item: offering } = useCourseProduct({
     product_id: order.product_id,
     course_id: course.code,
@@ -75,8 +82,10 @@ export const DashboardItemOrder = ({
   const needsSignature = OrderHelper.orderNeedsSignature(order);
   const needsPaymentMethod = order.state === OrderState.TO_SAVE_PAYMENT_METHOD;
   const isActive = OrderHelper.isActive(order);
+  const isWithdrawn = OrderHelper.isWithdrawn(order);
   const isProductPurchasable = ProductHelper.isPurchasable(offering?.product);
   const isNotResumable = !isActive && !isProductPurchasable;
+  const hideResumableContent = isNotResumable || isWithdrawn;
   const canEnroll = OrderHelper.allowEnrollment(order);
   const isFreeFromBatchOrder = OrderHelper.isFreeFromBatchOrder(order);
 
@@ -107,12 +116,23 @@ export const DashboardItemOrder = ({
                   </>
                 ) : (
                   <>
-                    <Icon name={IconTypeEnum.SCHOOL} />
-                    <OrderStateLearnerMessage order={order} />
+                    <Icon name={isWithdrawn ? IconTypeEnum.ROUND_CLOSE : IconTypeEnum.SCHOOL} />
+                    <span>
+                      <OrderStateLearnerMessage order={order} />
+                      {isWithdrawn && order.withdrawn_confirmation_at && (
+                        <>
+                          {' '}
+                          <FormattedMessage
+                            {...messages.withdrawnOn}
+                            values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+                          />
+                        </>
+                      )}
+                    </span>
                   </>
                 )}
               </div>
-              {!isNotResumable && showDetailsButton && !isFreeFromBatchOrder && (
+              {!hideResumableContent && showDetailsButton && !isFreeFromBatchOrder && (
                 <RouterButton
                   size="small"
                   className="dashboard-item__button"
@@ -170,7 +190,7 @@ export const DashboardItemOrder = ({
           </>
         }
       >
-        {!isNotResumable && (
+        {!hideResumableContent && (
           <DashboardSubItemsList
             subItems={order.target_courses?.map((targetCourse) => (
               <DashboardSubItem
@@ -195,15 +215,11 @@ export const DashboardItemOrder = ({
           />
         )}
       </DashboardItem>
-      {!isNotResumable && (
-        <>
-          {showCertificate && !!product?.certificate_definition && (
-            <CertificateItem order={order} product={product} />
-          )}
-          {writable && !isFreeFromBatchOrder && (
-            <OrganizationBlock order={order} product={product} />
-          )}
-        </>
+      {!hideResumableContent && showCertificate && !!product?.certificate_definition && (
+        <CertificateItem order={order} product={product} />
+      )}
+      {!isNotResumable && writable && !isFreeFromBatchOrder && (
+        <OrganizationBlock order={order} product={product} />
       )}
     </div>
   );

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

@@ -88,7 +88,6 @@ describe('<DashboardItemOrder/> Contract', () => {
       fetchMock.get(
         'https://joanie.endpoint/api/v1.0/orders/' +
           '?product_type=credential' +
-          '&state_exclude=canceled' +
           '&state_exclude=refunding' +
           '&state_exclude=refunded' +
           '&page=1' +
@@ -267,7 +266,6 @@ describe('<DashboardItemOrder/> Contract', () => {
       fetchMock.get(
         'https://joanie.endpoint/api/v1.0/orders/' +
           '?product_type=credential' +
-          '&state_exclude=canceled' +
           '&state_exclude=refunding' +
           '&state_exclude=refunded' +
           '&page=1' +

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

@@ -19,6 +19,7 @@ describe('<OrderStateLearnerMessage/>', () => {
     [OrderState.NO_PAYMENT, 'First direct debit has failed'],
     [OrderState.PENDING, 'Pending for the first direct debit'],
     [OrderState.PENDING_PAYMENT, 'On going'],
+    [OrderState.PENDING_WITHDRAW, 'Withdrawal in progress'],
     [OrderState.SIGNING, 'Signature required'],
     [OrderState.TO_SAVE_PAYMENT_METHOD, 'Payment method is missing'],
     [OrderState.TO_SIGN, 'Signature required'],
@@ -30,6 +31,17 @@ describe('<OrderStateLearnerMessage/>', () => {
     expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 
+  it('should display message for a withdrawn order', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.CANCELED,
+      withdrawn_confirmation_at: new Date().toISOString(),
+    }).one();
+    render(<OrderStateLearnerMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
+    expect(screen.getByText('Withdrawn')).toBeInTheDocument();
+  });
+
   it('should display message for completed order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
       state: OrderState.COMPLETED,

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

@@ -71,6 +71,17 @@ export const messages = defineMessages<MessageKeys>({
     description: 'Status shown on the dashboard order item when order is refunded',
     defaultMessage: 'Refunded',
   },
+  statusPendingWithdrawal: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusPendingWithdrawal',
+    description:
+      'Status shown on the dashboard order item when a withdrawal request is being processed',
+    defaultMessage: 'Withdrawal in progress',
+  },
+  statusWithdrawn: {
+    id: 'components.DashboardItem.Order.OrderStateLearnerMessage.statusWithdrawn',
+    description: 'Status shown on the dashboard order item when order has been withdrawn',
+    defaultMessage: 'Withdrawn',
+  },
 });
 
 const OrderStateLearnerMessage = (props: OrderStateMessageBaseProps) => {

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

@@ -19,10 +19,12 @@ export type MessageKeys =
   | 'statusPassed'
   | 'statusPending'
   | 'statusPendingPayment'
+  | 'statusPendingWithdrawal'
   | 'statusRefunded'
   | 'statusWaitingCounterSignature'
   | 'statusWaitingPaymentMethod'
-  | 'statusWaitingSignature';
+  | 'statusWaitingSignature'
+  | 'statusWithdrawn';
 
 interface OrderStateMessageProps extends OrderStateMessageBaseProps {
   messages: Record<MessageKeys, MessageDescriptor>;
@@ -45,10 +47,12 @@ const OrderStateMessage = ({ order, messages }: OrderStateMessageProps) => {
     [OrderStatus.PASSED]: messages.statusPassed,
     [OrderStatus.PENDING]: messages.statusPending,
     [OrderStatus.PENDING_PAYMENT]: messages.statusPendingPayment,
+    [OrderStatus.PENDING_WITHDRAWAL]: messages.statusPendingWithdrawal,
     [OrderStatus.REFUNDED]: messages.statusRefunded,
     [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
     [OrderStatus.WAITING_PAYMENT_METHOD]: messages.statusWaitingPaymentMethod,
     [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,
+    [OrderStatus.WITHDRAWN]: messages.statusWithdrawn,
   };
   const status = OrderHelper.getState(order);
 

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

@@ -19,6 +19,7 @@ describe('<OrderStateTeacherMessage/>', () => {
     [OrderState.NO_PAYMENT, 'First direct debit has failed'],
     [OrderState.PENDING, 'Pending for the first direct debit'],
     [OrderState.PENDING_PAYMENT, 'On going'],
+    [OrderState.PENDING_WITHDRAW, 'Withdrawal in progress'],
     [OrderState.SIGNING, "Pending for learner's signature"],
     [OrderState.TO_SAVE_PAYMENT_METHOD, 'Payment method is missing'],
     [OrderState.TO_SIGN, "Pending for learner's signature"],
@@ -30,6 +31,17 @@ describe('<OrderStateTeacherMessage/>', () => {
     expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 
+  it('should display message for a withdrawn order', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.CANCELED,
+      withdrawn_confirmation_at: new Date().toISOString(),
+    }).one();
+    render(<OrderStateTeacherMessage order={order} />, {
+      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
+    });
+    expect(screen.getByText('Withdrawn')).toBeInTheDocument();
+  });
+
   it('should display message for validated order that need organization signature', () => {
     const order = CredentialOrderFactory({
       state: OrderState.PENDING_PAYMENT,

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

@@ -72,6 +72,17 @@ export const messages = defineMessages<MessageKeys>({
     description: 'Status shown on the dashboard order item when order is refunded',
     defaultMessage: 'Refunded',
   },
+  statusPendingWithdrawal: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPendingWithdrawal',
+    description:
+      'Status shown on the dashboard order item when a withdrawal request is being processed',
+    defaultMessage: 'Withdrawal in progress',
+  },
+  statusWithdrawn: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWithdrawn',
+    description: 'Status shown on the dashboard order item when order has been withdrawn',
+    defaultMessage: 'Withdrawn',
+  },
 });
 
 const OrderStateTeacherMessage = (props: OrderStateMessageBaseProps) => {

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

@@ -0,0 +1,139 @@
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import fetchMock from 'fetch-mock';
+import { OrderState } from 'types/Joanie';
+import {
+  UserFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
+import { CredentialOrderFactory, CertificateOrderFactory } from 'utils/test/factories/joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { OrderWithdrawalModal } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+const mockMessageModal = jest.fn();
+jest.mock('@openfun/cunningham-react', () => ({
+  ...jest.requireActual('@openfun/cunningham-react'),
+  useModals: () => ({
+    messageModal: mockMessageModal,
+  }),
+}));
+
+describe('<OrderWithdrawalModal/>', () => {
+  setupJoanieSession();
+  const user = UserFactory().one();
+  const renderModal = (props: Partial<React.ComponentProps<typeof OrderWithdrawalModal>>) =>
+    render(
+      <OrderWithdrawalModal
+        isOpen
+        onClose={jest.fn()}
+        order={CredentialOrderFactory().one()}
+        productTitle="Some product"
+        reference="COURSE-CODE"
+        {...props}
+      />,
+      { queryOptions: { client: createTestQueryClient({ user }) } },
+    );
+
+  it('should display order and user information, without the account update link for a non-keycloak backend', () => {
+    const order = CredentialOrderFactory().one();
+
+    renderModal({ order });
+
+    expect(
+      screen.getByText('You wish to cancel your subscription to', { exact: false }),
+    ).toBeInTheDocument();
+    expect(screen.getByText(user.full_name!)).toBeInTheDocument();
+    expect(screen.getByText(user.email!)).toBeInTheDocument();
+    expect(screen.getByText(order.id)).toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', { name: 'please update your account' }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should confirm the withdrawal and display a confirmed message when the order is directly canceled', async () => {
+    const order = CredentialOrderFactory().one();
+    const updatedOrder = { ...order, state: OrderState.CANCELED };
+    fetchMock.post(`https://joanie.endpoint/api/v1.0/orders/${order.id}/withdraw/`, updatedOrder);
+    const onClose = jest.fn();
+
+    renderModal({ order, onClose });
+
+    const submitButton = screen.getByTestId('order-withdrawal-modal-submit-button');
+    await userEvent.click(submitButton);
+
+    await waitFor(() => expect(onClose).toHaveBeenCalled());
+    expect(mockMessageModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Withdrawal confirmed',
+        children: 'Your order has been canceled following your withdrawal request.',
+      }),
+    );
+  });
+
+  it('should confirm the withdrawal and display a pending message when the order needs manual review', async () => {
+    const order = CertificateOrderFactory().one();
+    const updatedOrder = { ...order, state: OrderState.PENDING_WITHDRAW };
+    fetchMock.post(`https://joanie.endpoint/api/v1.0/orders/${order.id}/withdraw/`, updatedOrder);
+    const onSuccess = jest.fn();
+
+    renderModal({ order, onSuccess });
+
+    const submitButton = screen.getByTestId('order-withdrawal-modal-submit-button');
+    await userEvent.click(submitButton);
+
+    await waitFor(() => expect(onSuccess).toHaveBeenCalledWith(updatedOrder));
+    expect(mockMessageModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: 'Withdrawal request recorded',
+        children: 'Your withdrawal request has been recorded and is being processed.',
+      }),
+    );
+  });
+
+  it('should display a specific error message when the withdrawal delay has expired', async () => {
+    const order = CredentialOrderFactory().one();
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/orders/${order.id}/withdraw/`,
+      HttpStatusCode.UNPROCESSABLE_ENTITY,
+    );
+    const onClose = jest.fn();
+
+    renderModal({ order, onClose });
+
+    const submitButton = screen.getByTestId('order-withdrawal-modal-submit-button');
+    await userEvent.click(submitButton);
+
+    await screen.findByText('The withdrawal period for this order has expired.');
+    expect(onClose).not.toHaveBeenCalled();
+    expect(mockMessageModal).not.toHaveBeenCalled();
+  });
+
+  it('should display a generic error message for any other API error', async () => {
+    const order = CredentialOrderFactory().one();
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/orders/${order.id}/withdraw/`,
+      HttpStatusCode.INTERNAL_SERVER_ERROR,
+    );
+    const onClose = jest.fn();
+
+    renderModal({ order, onClose });
+
+    const submitButton = screen.getByTestId('order-withdrawal-modal-submit-button');
+    await userEvent.click(submitButton);
+
+    await screen.findByText('An error occurred, please contact our support team.');
+    expect(onClose).not.toHaveBeenCalled();
+    expect(mockMessageModal).not.toHaveBeenCalled();
+  });
+});