richie-education 3.5.1-dev2 → 3.5.2-dev6

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();
+  });
+});

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

@@ -0,0 +1,259 @@
+import {
+  Alert,
+  Button,
+  Modal,
+  ModalProps,
+  ModalSize,
+  useModals,
+  VariantType,
+} from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
+import { ReactNode, useState } from 'react';
+import { Order, OrderEnrollment, OrderState } from 'types/Joanie';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { useOrders } from 'hooks/useOrders';
+import { useSession } from 'contexts/SessionContext';
+import { UserHelper } from 'utils/UserHelper';
+import { AuthenticationApi } from 'api/authentication';
+import { APIBackend, KeycloakAccountApi } from 'types/api';
+import context from 'utils/context';
+import { Spinner } from 'components/Spinner';
+import { HttpStatusCode, isHttpError } from 'utils/errors/HttpError';
+
+const boldChunk = (chunks: ReactNode) => <strong>{chunks}</strong>;
+
+const InfoRow = ({ label, value }: { label: MessageDescriptor; value: ReactNode }) => (
+  <p className="mb-s">
+    <span className="fw-bold">
+      <FormattedMessage {...label} />
+    </span>{' '}
+    {value}
+  </p>
+);
+
+const messages = defineMessages({
+  title: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.title',
+    defaultMessage: 'Withdrawal request',
+    description: 'Title of the withdrawal request modal',
+  },
+  description: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.description',
+    defaultMessage:
+      'You wish to cancel your subscription to <bold>{productTitle} - Ref. {reference}</bold>.',
+    description: 'Message displayed in the withdrawal request modal',
+  },
+  informationTitle: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.informationTitle',
+    defaultMessage: 'Information',
+    description: 'Title of the information recap section in the withdrawal request modal',
+  },
+  informationDescription: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.informationDescription',
+    defaultMessage:
+      'This information will be included in the acknowledgement of receipt for your request.',
+    description: 'Description of the information recap section in the withdrawal request modal',
+  },
+  accountNameLabel: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.accountNameLabel',
+    defaultMessage: 'Account name',
+    description: 'Label for the account name in the withdrawal request modal',
+  },
+  accountEmailLabel: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.accountEmailLabel',
+    defaultMessage: 'Account email',
+    description: 'Label for the account email in the withdrawal request modal',
+  },
+  orderReferenceLabel: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.orderReferenceLabel',
+    defaultMessage: 'Order reference',
+    description: 'Label for the order reference in the withdrawal request modal',
+  },
+  accountLinkInfo: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.accountLinkInfo',
+    defaultMessage: 'If any of the information above is incorrect,',
+    description: 'Text before the account update link in the withdrawal request modal',
+  },
+  accountLinkLabel: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.accountLinkLabel',
+    defaultMessage: 'please update your account',
+    description: 'Label of the account update link in the withdrawal request modal',
+  },
+  submit: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.submit',
+    defaultMessage: 'I confirm my withdrawal request',
+    description: 'Submit button label of the withdrawal request modal',
+  },
+  submitInProgress: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.submitInProgress',
+    defaultMessage: 'Withdrawal request in progress',
+    description: 'Label for screen reader when a withdrawal request is in progress.',
+  },
+  successConfirmedTitle: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.successConfirmedTitle',
+    defaultMessage: 'Withdrawal confirmed',
+    description: 'Title of the success modal when the withdrawal is confirmed immediately',
+  },
+  successConfirmedDescription: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.successConfirmedDescription',
+    defaultMessage: 'Your order has been canceled following your withdrawal request.',
+    description: 'Description of the success modal when the withdrawal is confirmed immediately',
+  },
+  successPendingTitle: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.successPendingTitle',
+    defaultMessage: 'Withdrawal request recorded',
+    description: 'Title of the success modal when the withdrawal request needs manual review',
+  },
+  successPendingDescription: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.successPendingDescription',
+    defaultMessage: 'Your withdrawal request has been recorded and is being processed.',
+    description: 'Description of the success modal when the withdrawal request needs manual review',
+  },
+  errorDelayExpired: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.errorDelayExpired',
+    defaultMessage: 'The withdrawal period for this order has expired.',
+    description: 'Error message when the withdrawal delay has expired',
+  },
+  errorDefault: {
+    id: 'components.DashboardItemOrder.OrderWithdrawalModal.errorDefault',
+    defaultMessage: 'An error occurred, please contact our support team.',
+    description: 'Generic error message when the withdrawal request failed',
+  },
+});
+
+interface Props extends Pick<ModalProps, 'isOpen' | 'onClose'> {
+  order: Order | OrderEnrollment;
+  productTitle: string;
+  reference: string;
+  /**
+   * Called with the fresh order returned by the API once the withdrawal request succeeds.
+   * Callers relying on locally held order state (rather than a query that gets invalidated)
+   * must use this to update it, otherwise the UI keeps showing stale data until a full
+   * page refresh.
+   */
+  onSuccess?: (order: Order) => void;
+}
+
+enum ComponentStates {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error',
+}
+
+export const OrderWithdrawalModal = ({
+  order,
+  productTitle,
+  reference,
+  onSuccess,
+  ...props
+}: Props) => {
+  const intl = useIntl();
+  const API = useJoanieApi();
+  const { user } = useSession();
+  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
+  const modals = useModals();
+  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
+  const [error, setError] = useState<string>();
+
+  const isKeycloakBackend = [APIBackend.KEYCLOAK, APIBackend.FONZIE_KEYCLOAK].includes(
+    context?.authentication.backend as APIBackend,
+  );
+
+  const submit = async () => {
+    setState(ComponentStates.LOADING);
+    try {
+      const updatedOrder = await API.user.orders.withdraw(order.id);
+      await orderMethods.invalidate();
+      onSuccess?.(updatedOrder);
+      props.onClose();
+      await modals.messageModal({
+        messageType: VariantType.SUCCESS,
+        title: intl.formatMessage(
+          updatedOrder.state === OrderState.PENDING_WITHDRAW
+            ? messages.successPendingTitle
+            : messages.successConfirmedTitle,
+        ),
+        children: intl.formatMessage(
+          updatedOrder.state === OrderState.PENDING_WITHDRAW
+            ? messages.successPendingDescription
+            : messages.successConfirmedDescription,
+        ),
+      });
+    } catch (submitError) {
+      setState(ComponentStates.ERROR);
+      setError(
+        intl.formatMessage(
+          isHttpError(submitError) && submitError.code === HttpStatusCode.UNPROCESSABLE_ENTITY
+            ? messages.errorDelayExpired
+            : messages.errorDefault,
+        ),
+      );
+    }
+  };
+
+  return (
+    <Modal
+      {...props}
+      size={ModalSize.MEDIUM}
+      title={intl.formatMessage(messages.title)}
+      closeOnEsc={state !== ComponentStates.LOADING}
+      preventClose={state === ComponentStates.LOADING}
+      hideCloseButton={state === ComponentStates.LOADING}
+      actions={
+        <Button
+          color="error"
+          variant="primary"
+          size="small"
+          fullWidth={true}
+          onClick={submit}
+          disabled={state === ComponentStates.LOADING}
+          data-testid="order-withdrawal-modal-submit-button"
+        >
+          {state === ComponentStates.LOADING ? (
+            <Spinner theme="light" aria-labelledby="withdrawal-request-in-progress">
+              <span id="withdrawal-request-in-progress">
+                <FormattedMessage {...messages.submitInProgress} />
+              </span>
+            </Spinner>
+          ) : (
+            <FormattedMessage {...messages.submit} />
+          )}
+        </Button>
+      }
+    >
+      {error && (
+        <Alert type={VariantType.ERROR} className="mb-t">
+          {error}
+        </Alert>
+      )}
+      <p className="mb-b">
+        <FormattedMessage
+          {...messages.description}
+          values={{
+            productTitle,
+            reference,
+            bold: boldChunk,
+          }}
+        />
+      </p>
+      <h3 className="block-title mb-t">
+        <FormattedMessage {...messages.informationTitle} />
+      </h3>
+      <p className="mb-s">
+        <FormattedMessage {...messages.informationDescription} />
+      </p>
+      <InfoRow label={messages.accountNameLabel} value={user ? UserHelper.getName(user) : ''} />
+      <InfoRow label={messages.accountEmailLabel} value={user?.email} />
+      <InfoRow label={messages.orderReferenceLabel} value={order.id} />
+      {isKeycloakBackend && (
+        <p className="mb-b">
+          <FormattedMessage {...messages.accountLinkInfo} />{' '}
+          <a href={(AuthenticationApi!.account as KeycloakAccountApi).updateUrl()}>
+            <FormattedMessage {...messages.accountLinkLabel} />
+          </a>
+          .
+        </p>
+      )}
+    </Modal>
+  );
+};

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

@@ -0,0 +1,102 @@
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { CredentialOrderFactory, CredentialProductFactory } from 'utils/test/factories/joanie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { render } from 'utils/test/render';
+import OrganizationBlock from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('../OrderWithdrawalModal', () => ({
+  __esModule: true,
+  OrderWithdrawalModal: ({
+    isOpen,
+    order,
+    productTitle,
+    reference,
+  }: {
+    isOpen: boolean;
+    order: { id: string };
+    productTitle: string;
+    reference: string;
+  }) => {
+    if (!isOpen) return null;
+    return (
+      <div data-testid="OrderWithdrawalModalMock">
+        {order.id} - {productTitle} - {reference}
+      </div>
+    );
+  },
+}));
+
+describe('<OrganizationBlock/>', () => {
+  setupJoanieSession();
+  const product = CredentialProductFactory({ contract_definition: undefined }).one();
+
+  it('should display the withdrawal block with the withdraw button when the order is eligible', () => {
+    const order = CredentialOrderFactory({
+      total: 0,
+      eligible_to_withdraw: true,
+      withdrawal_date_limit: '2026-08-30T10:00:00.000Z',
+      withdrawn_confirmation_at: null,
+    }).one();
+
+    render(<OrganizationBlock order={order} product={product} />);
+
+    const block = screen.getByTestId('dashboard-item-withdrawal');
+    within(block).getByRole('button', { name: 'Withdraw' });
+    within(block).getByText('Aug 30, 2026', { exact: false });
+    expect(screen.queryByTestId('dashboard-item-withdrawn')).not.toBeInTheDocument();
+  });
+
+  it('should not display any withdrawal information when the order is not eligible and has not been withdrawn', () => {
+    const order = CredentialOrderFactory({
+      total: 0,
+      eligible_to_withdraw: false,
+      withdrawn_confirmation_at: null,
+    }).one();
+
+    render(<OrganizationBlock order={order} product={product} />);
+
+    expect(screen.queryByTestId('dashboard-item-withdrawal')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('dashboard-item-withdrawn')).not.toBeInTheDocument();
+  });
+
+  it('should display the withdrawn status instead of the withdrawal block once the order has been withdrawn', () => {
+    const order = CredentialOrderFactory({
+      total: 0,
+      eligible_to_withdraw: false,
+      withdrawn_confirmation_at: '2026-08-10T10:00:00.000Z',
+    }).one();
+
+    render(<OrganizationBlock order={order} product={product} />);
+
+    const block = screen.getByTestId('dashboard-item-withdrawn');
+    within(block).getByText('Aug 10, 2026', { exact: false });
+    expect(screen.queryByTestId('dashboard-item-withdrawal')).not.toBeInTheDocument();
+  });
+
+  it('should open the withdrawal modal with the order reference and product title when clicking the withdraw button', async () => {
+    const order = CredentialOrderFactory({
+      total: 0,
+      eligible_to_withdraw: true,
+      withdrawn_confirmation_at: null,
+    }).one();
+
+    render(<OrganizationBlock order={order} product={product} />);
+
+    expect(screen.queryByTestId('OrderWithdrawalModalMock')).not.toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Withdraw' }));
+
+    within(screen.getByTestId('OrderWithdrawalModalMock')).getByText(
+      `${order.id} - ${product.title} - ${order.course.code}`,
+    );
+  });
+});

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

@@ -1,10 +1,12 @@
-import { defineMessages, FormattedMessage } from 'react-intl';
-import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button, useModal } from '@openfun/cunningham-react';
 import { CredentialOrder, Product } from 'types/Joanie';
 import { AddressView } from 'components/Address';
 import { OrderHelper } from 'utils/OrderHelper';
+import useDateFormat, { DATETIME_FORMAT } from 'hooks/useDateFormat';
 import ContractItem from '../ContractItem';
 import Installment from '../Installment';
+import { OrderWithdrawalModal } from '../OrderWithdrawalModal';
 
 const messages = defineMessages({
   contactDescription: {
@@ -52,6 +54,31 @@ const messages = defineMessages({
     description: 'Subtitle for the organization contacts section',
     defaultMessage: 'Contacts',
   },
+  withdrawalTitle: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalTitle',
+    description: 'Title of the withdrawal block',
+    defaultMessage: 'Withdrawal',
+  },
+  withdrawalDescription: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalDescription',
+    description: 'Description of the withdrawal block',
+    defaultMessage: 'You can withdraw from your contract until {date}.',
+  },
+  withdrawalButton: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawalButton',
+    description: 'Button label of the withdrawal block',
+    defaultMessage: 'Withdraw',
+  },
+  withdrawnTitle: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawnTitle',
+    description: 'Title of the withdrawal block once the withdrawal is confirmed',
+    defaultMessage: 'Withdrawn',
+  },
+  withdrawnDescription: {
+    id: 'components.DashboardItemOrder.OrganizationBlock.withdrawnDescription',
+    description: 'Description shown once the withdrawal is confirmed',
+    defaultMessage: 'You withdrew from this order on {date}.',
+  },
 });
 
 type Props = {
@@ -148,7 +175,62 @@ const OrganizationBlock = ({ order, product }: Props) => {
           </div>
         )}
         {!hidePaymentBlock && <Installment order={order} />}
+        {order.eligible_to_withdraw && <Withdrawal order={order} product={product} />}
+        {OrderHelper.isWithdrawn(order) && <WithdrawnStatus order={order} />}
+      </div>
+    </div>
+  );
+};
+
+const Withdrawal = ({ order, product }: Props) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat(DATETIME_FORMAT);
+  const modal = useModal();
+
+  return (
+    <div data-testid="dashboard-item-withdrawal" className="dashboard-splitted-card__item">
+      <div className="dashboard-splitted-card__item__title">
+        <span>
+          <FormattedMessage {...messages.withdrawalTitle} />
+        </span>
+      </div>
+      <p className="dashboard-splitted-card__item__description">
+        <FormattedMessage
+          {...messages.withdrawalDescription}
+          values={{ date: formatDate(order.withdrawal_date_limit) }}
+        />
+      </p>
+      <div className="dashboard-splitted-card__item__actions">
+        <Button size="small" color="brand" variant="secondary" onClick={modal.open}>
+          {intl.formatMessage(messages.withdrawalButton)}
+        </Button>
+      </div>
+      <OrderWithdrawalModal
+        {...modal}
+        order={order}
+        productTitle={product.title}
+        reference={order.course.code}
+      />
+    </div>
+  );
+};
+
+const WithdrawnStatus = ({ order }: { order: CredentialOrder }) => {
+  const formatDate = useDateFormat(DATETIME_FORMAT);
+
+  return (
+    <div data-testid="dashboard-item-withdrawn" className="dashboard-splitted-card__item">
+      <div className="dashboard-splitted-card__item__title">
+        <span>
+          <FormattedMessage {...messages.withdrawnTitle} />
+        </span>
       </div>
+      <p className="dashboard-splitted-card__item__description">
+        <FormattedMessage
+          {...messages.withdrawnDescription}
+          values={{ date: formatDate(order.withdrawn_confirmation_at) }}
+        />
+      </p>
     </div>
   );
 };

package/js/widgets/Dashboard/components/DashboardItem/_styles.scss

@@ -56,7 +56,9 @@
 
     &__status {
       display: flex;
-      align-items: center;
+      // flex-start (not center) so the icon stays aligned with the first line
+      // of text when the text wraps onto several lines.
+      align-items: flex-start;
       gap: 0.5rem;
 
       @include media-breakpoint-down(sm) {
@@ -179,6 +181,7 @@
     justify-content: space-between;
     padding: 0.5rem 1rem;
     min-height: 3.75rem;
+    border-top: $onepixel solid r-theme-val(dashboard-item, base-border);
 
     &:first-child {
       border-top: 0;
@@ -201,6 +204,11 @@
     p {
       margin: 0;
     }
+
+    &__withdrawal__button {
+      text-decoration: underline;
+      white-space: nowrap;
+    }
   }
 
   &__runs {