richie-education 3.5.1 → 3.5.2-dev6

package/js/api/joanie.ts

@@ -101,6 +101,7 @@ export const getRoutes = () => {
         submit_for_signature: `${baseUrl}/orders/:id/submit_for_signature/`,
         submit_installment_payment: `${baseUrl}/orders/:id/submit-installment-payment/`,
         set_payment_method: `${baseUrl}/orders/:id/payment-method/`,
+        withdraw: `${baseUrl}/orders/:id/withdraw/`,
       },
       batchOrders: {
         get: `${baseUrl}/batch-orders/:id/`,
@@ -340,6 +341,10 @@ const API = (): Joanie.API => {
             method: 'POST',
             body: JSON.stringify(payload),
           }).then(checkStatus),
+        withdraw: async (id) =>
+          fetchWithJWT(ROUTES.user.orders.withdraw.replace(':id', id), {
+            method: 'POST',
+          }).then(checkStatus),
       },
       batchOrders: {
         create: async (payload) =>

package/js/components/SaleTunnel/index.spec.tsx

@@ -552,7 +552,7 @@ describe.each([
       enrollmentDiscounted.offerings[0].product = product;
       fetchMock
         .get(
-          `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollmentDiscounted.id}&product_id=${product.id}&state=pending&state=pending_payment&state=no_payment&state=failed_payment&state=completed&state=draft&state=assigned&state=to_sign&state=signing&state=to_save_payment_method`,
+          `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollmentDiscounted.id}&product_id=${product.id}&state=pending&state=pending_payment&state=no_payment&state=failed_payment&state=completed&state=pending_withdraw&state=draft&state=assigned&state=to_sign&state=signing&state=to_save_payment_method`,
           {
             results: [],
             next: null,

package/js/hooks/useLearnerCoursesSearch/index.tsx

@@ -1,8 +1,18 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router';
-import { Enrollment, CredentialOrder, ProductType, CANCELED_ORDER_STATES } from 'types/Joanie';
+import { Enrollment, CredentialOrder, ProductType, OrderState } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
-import { useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
+import { OrderHelper } from 'utils/OrderHelper';
+import { isOrder, useOrdersEnrollments } from 'pages/DashboardCourses/useOrdersEnrollments';
+
+/**
+ * Orders canceled following the buyer's withdrawal must stay visible in the dashboard
+ * (the learner needs to keep a trace of that legal action), unlike other cancellation
+ * causes. The API can't filter on that distinction yet, so we only exclude REFUNDING/
+ * REFUNDED server-side and drop the remaining non-withdrawn CANCELED orders here.
+ */
+const isHiddenCanceledOrder = (item: CredentialOrder | Enrollment) =>
+  isOrder(item) && OrderHelper.isCanceled(item) && !OrderHelper.isWithdrawn(item);
 
 const useLearnerCoursesSearch = () => {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -23,7 +33,7 @@ const useLearnerCoursesSearch = () => {
     query,
     orderFilters: {
       product_type: [ProductType.CREDENTIAL],
-      state_exclude: CANCELED_ORDER_STATES,
+      state_exclude: [OrderState.REFUNDING, OrderState.REFUNDED],
     },
   });
 
@@ -41,7 +51,10 @@ const useLearnerCoursesSearch = () => {
     }
 
     if (isNewSearchLoading || data.length > orderAndEnrollmentList?.length) {
-      setOrderAndEnrollmentList(data as (CredentialOrder | Enrollment)[]);
+      const visibleData = (data as (CredentialOrder | Enrollment)[]).filter(
+        (item) => !isHiddenCanceledOrder(item),
+      );
+      setOrderAndEnrollmentList(visibleData);
       setCount(currentCount);
     }
   }, [data.length, isLoading, isNewSearchLoading, query]);

package/js/hooks/useProductOrder/index.spec.tsx

@@ -84,6 +84,7 @@ describe('useProductOrder', () => {
       `&state=${OrderState.NO_PAYMENT}` +
       `&state=${OrderState.FAILED_PAYMENT}` +
       `&state=${OrderState.COMPLETED}` +
+      `&state=${OrderState.PENDING_WITHDRAW}` +
       `&state=${OrderState.DRAFT}` +
       `&state=${OrderState.ASSIGNED}` +
       `&state=${OrderState.TO_SIGN}` +

package/js/pages/DashboardCourses/index.spec.tsx

@@ -10,7 +10,7 @@ import {
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
-import { CourseLight, Offering, Enrollment, CredentialOrder } from 'types/Joanie';
+import { CourseLight, Offering, Enrollment, CredentialOrder, OrderState } from 'types/Joanie';
 import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
 import { expectBannerError, expectBannerInfo, expectNoBannerInfo } from 'utils/test/expectBanner';
 import { Deferred } from 'utils/test/deferred';
@@ -105,7 +105,6 @@ describe('<DashboardCourses/>', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=1' +
@@ -153,7 +152,6 @@ describe('<DashboardCourses/>', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=1' +
@@ -163,7 +161,6 @@ describe('<DashboardCourses/>', () => {
         next:
           'https://joanie.endpoint/api/v1.0/orders/' +
           '?product_type=credential' +
-          '&state_exclude=canceled' +
           '&state_exclude=refunding' +
           '&state_exclude=refunded' +
           '&page=2' +
@@ -175,7 +172,6 @@ describe('<DashboardCourses/>', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=2' +
@@ -185,7 +181,6 @@ describe('<DashboardCourses/>', () => {
         next:
           'https://joanie.endpoint/api/v1.0/orders/' +
           '?product_type=credential' +
-          '&state_exclude=canceled' +
           '&state_exclude=refunding' +
           '&state_exclude=refunded' +
           '&page=3' +
@@ -197,7 +192,6 @@ describe('<DashboardCourses/>', () => {
     fetchMock.get(
       'https://joanie.endpoint/api/v1.0/orders/' +
         '?product_type=credential' +
-        '&state_exclude=canceled' +
         '&state_exclude=refunding' +
         '&state_exclude=refunded' +
         '&page=3' +
@@ -271,13 +265,51 @@ describe('<DashboardCourses/>', () => {
     expect(loadMoreButton).toBeEnabled();
   }, 15000);
 
+  it('keeps a withdrawn order visible while filtering out other canceled orders', async () => {
+    const activeOrder = CredentialOrderFactory({
+      state: OrderState.COMPLETED,
+      created_on: '2026-01-03T00:00:00.000Z',
+    }).one();
+    const withdrawnOrder = CredentialOrderFactory({
+      state: OrderState.CANCELED,
+      created_on: '2026-01-02T00:00:00.000Z',
+      withdrawn_confirmation_at: '2026-01-02T00:00:00.000Z',
+    }).one();
+    const canceledOrder = CredentialOrderFactory({
+      state: OrderState.CANCELED,
+      created_on: '2026-01-01T00:00:00.000Z',
+      withdrawn_confirmation_at: null,
+    }).one();
+    const { orders, offerings } = mockOrders([activeOrder, withdrawnOrder, canceledOrder]);
+
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/' +
+        '?product_type=credential' +
+        '&state_exclude=refunding' +
+        '&state_exclude=refunded' +
+        '&page=1' +
+        `&page_size=${perPage}`,
+      { results: orders, next: null, previous: null, count: orders.length },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/enrollments/?was_created_by_order=false&is_active=true&page=1&page_size=${perPage}`,
+      { results: [], next: null, previous: null, count: 0 },
+    );
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading orders and enrollments...');
+    await waitFor(() => expectList([activeOrder, withdrawnOrder], offerings));
+  });
+
   it('shows an error', async () => {
     jest.spyOn(console, 'error').mockImplementation(noop);
     const ordersDeferred = new Deferred();
     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/types/Joanie.ts

@@ -312,6 +312,7 @@ export enum OrderState {
   NO_PAYMENT = 'no_payment',
   PENDING = 'pending',
   PENDING_PAYMENT = 'pending_payment',
+  PENDING_WITHDRAW = 'pending_withdraw',
   SIGNING = 'signing',
   TO_SAVE_PAYMENT_METHOD = 'to_save_payment_method',
   TO_SIGN = 'to_sign',
@@ -331,6 +332,7 @@ export const ACTIVE_ORDER_STATES = [
   OrderState.NO_PAYMENT,
   OrderState.FAILED_PAYMENT,
   OrderState.COMPLETED,
+  OrderState.PENDING_WITHDRAW,
 ];
 
 export const NOT_CANCELED_ORDER_STATES = [...ACTIVE_ORDER_STATES, ...PURCHASABLE_ORDER_STATES];
@@ -367,6 +369,11 @@ export interface Order {
   payment_schedule?: PaymentSchedule;
   credit_card_id?: CreditCard['id'];
   from_batch_order?: boolean;
+  has_waived_withdrawal_right: boolean;
+  eligible_to_withdraw: boolean;
+  withdrawal_date_limit: Nullable<string>;
+  withdrawn_requested_at: Nullable<string>;
+  withdrawn_confirmation_at: Nullable<string>;
 }
 
 export interface CredentialOrder extends Order {
@@ -418,7 +425,16 @@ export interface NestedCredentialOrder extends AbstractNestedOrder {
 
 export type OrderEnrollment = Pick<
   Order,
-  'id' | 'state' | 'product_id' | 'certificate_id' | 'payment_schedule'
+  | 'id'
+  | 'state'
+  | 'product_id'
+  | 'certificate_id'
+  | 'payment_schedule'
+  | 'has_waived_withdrawal_right'
+  | 'eligible_to_withdraw'
+  | 'withdrawal_date_limit'
+  | 'withdrawn_requested_at'
+  | 'withdrawn_confirmation_at'
 >;
 
 export interface NestedCourseOrder {
@@ -838,6 +854,7 @@ interface APIUser {
       payload?: OrderSubmitInstallmentPayment,
     ): Promise<Payment>;
     set_payment_method(payload: OrderSetPaymentMethodPayload): Promise<void>;
+    withdraw(id: Order['id']): Promise<CredentialOrder | CertificateOrder>;
   };
   batchOrders: {
     create(payload: BatchOrder): Promise<BatchOrderRead>;

package/js/utils/OrderHelper/index.spec.ts

@@ -0,0 +1,75 @@
+import { OrderState } from 'types/Joanie';
+import { CredentialOrderFactory, OrderEnrollmentFactory } from 'utils/test/factories/joanie';
+import { OrderHelper, OrderStatus } from '.';
+
+describe('OrderHelper', () => {
+  describe('isWithdrawn', () => {
+    it('should return false when the order is undefined', () => {
+      expect(OrderHelper.isWithdrawn(undefined)).toBe(false);
+    });
+
+    it('should return false when withdrawn_confirmation_at is not set', () => {
+      const order = CredentialOrderFactory({ withdrawn_confirmation_at: null }).one();
+      expect(OrderHelper.isWithdrawn(order)).toBe(false);
+    });
+
+    it('should return true when withdrawn_confirmation_at is set', () => {
+      const order = CredentialOrderFactory({
+        withdrawn_confirmation_at: new Date().toISOString(),
+      }).one();
+      expect(OrderHelper.isWithdrawn(order)).toBe(true);
+    });
+  });
+
+  describe('getState', () => {
+    it('should return WITHDRAWN when the order has been withdrawn, regardless of its state', () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.CANCELED,
+        withdrawn_confirmation_at: new Date().toISOString(),
+      }).one();
+      expect(OrderHelper.getState(order)).toBe(OrderStatus.WITHDRAWN);
+    });
+
+    it('should return PENDING_WITHDRAWAL for a pending_withdraw order', () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.PENDING_WITHDRAW,
+        withdrawn_confirmation_at: null,
+      }).one();
+      expect(OrderHelper.getState(order)).toBe(OrderStatus.PENDING_WITHDRAWAL);
+    });
+  });
+
+  describe('getActiveEnrollmentOrder', () => {
+    it('should return a withdrawn order matching the product id even though it is not active', () => {
+      const withdrawnOrder = OrderEnrollmentFactory({
+        state: OrderState.CANCELED,
+        product_id: 'PRODUCT_ID',
+        withdrawn_confirmation_at: new Date().toISOString(),
+      }).one();
+
+      expect(OrderHelper.getActiveEnrollmentOrder([withdrawnOrder], 'PRODUCT_ID')).toBe(
+        withdrawnOrder,
+      );
+    });
+
+    it('should not return a canceled order that has not been withdrawn', () => {
+      const canceledOrder = OrderEnrollmentFactory({
+        state: OrderState.CANCELED,
+        product_id: 'PRODUCT_ID',
+        withdrawn_confirmation_at: null,
+      }).one();
+
+      expect(OrderHelper.getActiveEnrollmentOrder([canceledOrder], 'PRODUCT_ID')).toBeUndefined();
+    });
+  });
+
+  describe('isPurchasable', () => {
+    it('should return true when the order has been withdrawn, regardless of its state', () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.CANCELED,
+        withdrawn_confirmation_at: new Date().toISOString(),
+      }).one();
+      expect(OrderHelper.isPurchasable(order)).toBe(true);
+    });
+  });
+});

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