richie-education 3.5.1 → 3.5.2-dev17

package/js/utils/OrderHelper/index.ts

@@ -20,9 +20,11 @@ export enum OrderStatus {
   PASSED = 'passed',
   PENDING = 'pending',
   PENDING_PAYMENT = 'pending_payment',
+  PENDING_WITHDRAWAL = 'pending_withdrawal',
   WAITING_COUNTER_SIGNATURE = 'waiting_counter_signature',
   WAITING_PAYMENT_METHOD = 'waiting_payment_method',
   WAITING_SIGNATURE = 'waiting_signature',
+  WITHDRAWN = 'withdrawn',
 }
 
 /**
@@ -36,6 +38,9 @@ export class OrderHelper {
     if (order.state === OrderState.COMPLETED && order.certificate_id) {
       return OrderStatus.PASSED;
     }
+    if (OrderHelper.isWithdrawn(order)) {
+      return OrderStatus.WITHDRAWN;
+    }
 
     const orderStatusMap = {
       [OrderState.ASSIGNED]: OrderStatus.ASSIGNED,
@@ -48,6 +53,7 @@ export class OrderHelper {
       [OrderState.NO_PAYMENT]: OrderStatus.NO_PAYMENT,
       [OrderState.PENDING]: OrderStatus.PENDING,
       [OrderState.PENDING_PAYMENT]: OrderStatus.PENDING_PAYMENT,
+      [OrderState.PENDING_WITHDRAW]: OrderStatus.PENDING_WITHDRAWAL,
       [OrderState.SIGNING]: OrderStatus.WAITING_SIGNATURE,
       [OrderState.TO_SAVE_PAYMENT_METHOD]: OrderStatus.WAITING_PAYMENT_METHOD,
       [OrderState.TO_SIGN]: OrderStatus.WAITING_SIGNATURE,
@@ -65,7 +71,8 @@ export class OrderHelper {
    */
   static getActiveEnrollmentOrder(orders: OrderEnrollment[], productId: string) {
     const filter = (order: OrderEnrollment) =>
-      ACTIVE_ORDER_STATES.includes(order.state) && order.product_id === productId;
+      (ACTIVE_ORDER_STATES.includes(order.state) || OrderHelper.isWithdrawn(order)) &&
+      order.product_id === productId;
     return orders.find(filter);
   }
 
@@ -100,8 +107,13 @@ export class OrderHelper {
     return CANCELED_ORDER_STATES.includes(order.state);
   }
 
+  static isWithdrawn(order?: Order | NestedCourseOrder | OrderEnrollment) {
+    if (!order) return false;
+    return Boolean('withdrawn_confirmation_at' in order && order.withdrawn_confirmation_at);
+  }
+
   static isPurchasable(order?: Order | NestedCourseOrder | OrderEnrollment) {
-    if (!order) return true;
+    if (!order || OrderHelper.isWithdrawn(order)) return true;
     return PURCHASABLE_ORDER_STATES.includes(order.state);
   }
 

package/js/utils/test/factories/factories.ts

@@ -40,7 +40,7 @@ const setUndefinedValues = (obj: any) => {
 };
 
 type Factory<TData> = (override?: Subset<TData>) => FactoryInterface<TData>;
-export const factory = <TData>(builder: FactoryBuilder<TData>): Factory<TData> => {
+export const factory = <TData extends unknown>(builder: FactoryBuilder<TData>): Factory<TData> => {
   const mergeData = (data: TData, override: Subset<TData>): TData => {
     const customizer = (_objValue: any, srcValue: any) => {
       if (Array.isArray(srcValue)) {

package/js/utils/test/factories/joanie.ts

@@ -471,6 +471,11 @@ export const OrderEnrollmentFactory = factory((): OrderEnrollment => {
     product_id: faker.string.uuid(),
     state: OrderState.COMPLETED,
     payment_schedule: PaymentInstallmentFactory().many(1),
+    has_waived_withdrawal_right: false,
+    eligible_to_withdraw: false,
+    withdrawal_date_limit: null,
+    withdrawn_requested_at: null,
+    withdrawn_confirmation_at: null,
   };
 });
 
@@ -600,6 +605,11 @@ const AbstractOrderFactory = factory((): Order => {
     course: null,
     organization_id: faker.string.uuid(),
     organization: OrganizationFactory().one(),
+    has_waived_withdrawal_right: false,
+    eligible_to_withdraw: false,
+    withdrawal_date_limit: null,
+    withdrawn_requested_at: null,
+    withdrawn_confirmation_at: null,
   };
 });
 

package/js/utils/test/mockPaginatedResponse.ts

@@ -1,6 +1,6 @@
 import { PaginatedResponse } from 'types/Joanie';
 
-export const mockPaginatedResponse: <Data>(
+export const mockPaginatedResponse: <Data extends unknown>(
   results?: Data[],
   totalCount?: number,
   haveNextPage?: boolean,

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

@@ -23,6 +23,7 @@ import {
   PaymentInstallmentFactory,
 } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
+import { DATETIME_FORMAT } from 'hooks/useDateFormat';
 import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { PER_PAGE } from 'settings';
@@ -70,6 +71,33 @@ jest.mock('widgets/Dashboard/components/DashboardItem/Order/OrderPaymentRetryMod
     );
   },
 }));
+jest.mock('widgets/Dashboard/components/DashboardItem/Order/OrderWithdrawalModal', () => ({
+  __esModule: true,
+  OrderWithdrawalModal: ({
+    isOpen,
+    order,
+    productTitle,
+    reference,
+    onSuccess,
+  }: {
+    isOpen: boolean;
+    order: { id: string; state: string };
+    productTitle: string;
+    reference: string;
+    onSuccess?: (order: any) => void;
+  }) => {
+    if (!isOpen) return null;
+
+    return (
+      <div data-testid="OrderWithdrawalModalMock">
+        {order.id} - {productTitle} - {reference}
+        <button onClick={() => onSuccess?.({ ...order, state: 'canceled' })}>
+          Trigger Success
+        </button>
+      </div>
+    );
+  },
+}));
 
 describe('<ProductCertificateFooter/>', () => {
   let product: CertificateProduct;
@@ -230,7 +258,6 @@ describe('<ProductCertificateFooter/>', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=1' +
@@ -384,4 +411,189 @@ describe('<ProductCertificateFooter/>', () => {
       expect(fetchMock.lastUrl()).toBe(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`);
     },
   );
+
+  it('should display the withdrawal manager and open the withdrawal modal when the order is eligible', async () => {
+    const order = OrderEnrollmentFactory({
+      state: OrderState.COMPLETED,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: true,
+      withdrawal_date_limit: '2026-08-30T10:00:00.000Z',
+    }).one();
+    const enrollment = EnrollmentFactory({
+      orders: [order],
+      course_run: CourseRunFactory({ course }).one(),
+    }).one();
+
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
+
+    const datetimeFormatter = new Intl.DateTimeFormat('en', DATETIME_FORMAT);
+    screen.getByText(`until ${datetimeFormatter.format(new Date(order.withdrawal_date_limit!))}.`, {
+      exact: false,
+    });
+    expect(screen.queryByTestId('OrderWithdrawalModalMock')).not.toBeInTheDocument();
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'I wish to withdraw' }));
+
+    const modal = screen.getByTestId('OrderWithdrawalModalMock');
+    within(modal).getByText(`${order.id} - ${product.title} - ${course.code}`);
+
+    // A successful withdrawal request updates the order held by the footer, hiding the
+    // withdrawal manager since the order is no longer active.
+    await user.click(within(modal).getByRole('button', { name: 'Trigger Success' }));
+    expect(screen.queryByRole('button', { name: 'I wish to withdraw' })).not.toBeInTheDocument();
+  });
+
+  it('should not display the withdrawal manager when the order is not eligible', () => {
+    const order = OrderEnrollmentFactory({
+      state: OrderState.COMPLETED,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: false,
+    }).one();
+    const enrollment = EnrollmentFactory({ orders: [order] }).one();
+
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
+
+    expect(screen.queryByRole('button', { name: 'I wish to withdraw' })).not.toBeInTheDocument();
+  });
+
+  it('should display a pending withdrawal message while the withdrawal request is being processed', () => {
+    const requestedAt = '2026-08-20T09:30:00.000Z';
+    const order = OrderEnrollmentFactory({
+      state: OrderState.PENDING_WITHDRAW,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: false,
+      withdrawn_requested_at: requestedAt,
+    }).one();
+    const enrollment = EnrollmentFactory({ orders: [order] }).one();
+
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
+
+    screen.getByText(
+      `Your withdrawal request has been recorded on ${dateFormatter.format(
+        new Date(requestedAt),
+      )} and is being processed.`,
+    );
+    expect(
+      screen.queryByText(product.certificate_definition.title, { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  it('should display a withdrawn message and hide the exam access status once the order has been withdrawn', () => {
+    const confirmedAt = '2026-08-25T14:00:00.000Z';
+    const order = OrderEnrollmentFactory({
+      state: OrderState.CANCELED,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: false,
+      withdrawn_confirmation_at: confirmedAt,
+    }).one();
+    const enrollment = EnrollmentFactory({ orders: [order] }).one();
+
+    render(
+      <ProductCertificateFooter product={product} enrollment={enrollment} isWithdrawable={true} />,
+    );
+
+    screen.getByText(
+      `You withdrew from this order on ${dateFormatter.format(new Date(confirmedAt))}.`,
+    );
+    expect(
+      screen.queryByText(product.certificate_definition.title, { exact: false }),
+    ).not.toBeInTheDocument();
+  });
+
+  /**
+   * The footer holds the active order in local state, initialized once from the
+   * `enrollment` prop: it isn't kept in sync with prop changes, so the only way the
+   * learner sees an admin's decision on a pending withdrawal request is by reloading
+   * the dashboard, which remounts the footer with fresh data. These two tests simulate
+   * that reload via unmount + render, rather than rerender.
+   */
+  it('reflects a confirmed withdrawal after the page is refreshed', () => {
+    const pendingOrder = OrderEnrollmentFactory({
+      state: OrderState.PENDING_WITHDRAW,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: false,
+      withdrawn_requested_at: '2026-08-20T09:30:00.000Z',
+    }).one();
+    const { unmount } = render(
+      <ProductCertificateFooter
+        product={product}
+        enrollment={EnrollmentFactory({ orders: [pendingOrder] }).one()}
+        isWithdrawable={true}
+      />,
+    );
+    screen.getByText('and is being processed.', { exact: false });
+    unmount();
+
+    const confirmedOrder = {
+      ...pendingOrder,
+      state: OrderState.CANCELED,
+      withdrawn_confirmation_at: '2026-08-21T10:00:00.000Z',
+    };
+    render(
+      <ProductCertificateFooter
+        product={product}
+        enrollment={EnrollmentFactory({ orders: [confirmedOrder] }).one()}
+        isWithdrawable={true}
+      />,
+    );
+
+    screen.getByText(
+      `You withdrew from this order on ${dateFormatter.format(
+        new Date(confirmedOrder.withdrawn_confirmation_at),
+      )}.`,
+    );
+    expect(screen.queryByText('and is being processed.', { exact: false })).not.toBeInTheDocument();
+  });
+
+  it('reflects a rejected withdrawal after the page is refreshed', () => {
+    const pendingOrder = OrderEnrollmentFactory({
+      state: OrderState.PENDING_WITHDRAW,
+      certificate_id: undefined,
+      product_id: product.id,
+      eligible_to_withdraw: false,
+      withdrawn_requested_at: '2026-08-20T09:30:00.000Z',
+    }).one();
+    const { unmount } = render(
+      <ProductCertificateFooter
+        product={product}
+        enrollment={EnrollmentFactory({ orders: [pendingOrder] }).one()}
+        isWithdrawable={true}
+      />,
+    );
+    screen.getByText('and is being processed.', { exact: false });
+    unmount();
+
+    // A rejected request resumes its normal course: the order goes back to completed
+    // and, since no certificate has been issued yet, remains eligible to a new request.
+    const rejectedOrder = {
+      ...pendingOrder,
+      state: OrderState.COMPLETED,
+      eligible_to_withdraw: true,
+    };
+    render(
+      <ProductCertificateFooter
+        product={product}
+        enrollment={EnrollmentFactory({ orders: [rejectedOrder] }).one()}
+        isWithdrawable={true}
+      />,
+    );
+
+    expect(screen.queryByText('and is being processed.', { exact: false })).not.toBeInTheDocument();
+    expect(
+      screen.queryByText('You withdrew from this order', { exact: false }),
+    ).not.toBeInTheDocument();
+    screen.getByRole('button', { name: 'I wish to withdraw' });
+  });
 });

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,30 @@ 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(`You withdrew from this order 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: 'Message displayed once a withdrawal request has been confirmed',
+    defaultMessage: 'You withdrew from this order 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,21 @@ export const DashboardItemOrder = ({
                   </>
                 ) : (
                   <>
-                    <Icon name={IconTypeEnum.SCHOOL} />
-                    <OrderStateLearnerMessage order={order} />
+                    <Icon name={isWithdrawn ? IconTypeEnum.ROUND_CLOSE : IconTypeEnum.SCHOOL} />
+                    <span>
+                      {isWithdrawn && order.withdrawn_confirmation_at ? (
+                        <FormattedMessage
+                          {...messages.withdrawnOn}
+                          values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+                        />
+                      ) : (
+                        <OrderStateLearnerMessage order={order} />
+                      )}
+                    </span>
                   </>
                 )}
               </div>
-              {!isNotResumable && showDetailsButton && !isFreeFromBatchOrder && (
+              {!hideResumableContent && showDetailsButton && !isFreeFromBatchOrder && (
                 <RouterButton
                   size="small"
                   className="dashboard-item__button"
@@ -170,7 +188,7 @@ export const DashboardItemOrder = ({
           </>
         }
       >
-        {!isNotResumable && (
+        {!hideResumableContent && (
           <DashboardSubItemsList
             subItems={order.target_courses?.map((targetCourse) => (
               <DashboardSubItem
@@ -195,15 +213,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>
   );