richie-education 3.5.1 → 3.5.2-dev8

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/api/lms/dummy.ts

@@ -65,6 +65,7 @@ function getUserInfo(username: DevDemoUser): User {
     access_token: accessToken,
     username: JWTPayload.username,
     full_name: JWTPayload.full_name,
+    email: JWTPayload.email,
   };
 }
 

package/js/api/lms/openedx-fonzie-keycloak.spec.ts

@@ -31,19 +31,16 @@ describe('Fonzie Keycloak API', () => {
     jest.clearAllMocks();
   });
 
-  it('uses its own route to get user information and enriches with keycloak account', async () => {
+  it('reads the email and full name from the access token claims', async () => {
+    // JWT payload: { email: 'john.doe@example.com', full_name: 'John Doe' }
+    const accessToken =
+      'header.eyJlbWFpbCI6ImpvaG4uZG9lQGV4YW1wbGUuY29tIiwiZnVsbF9uYW1lIjoiSm9obiBEb2UifQ.signature';
     const user = {
       username: 'test-richie-ncl',
-      full_name: 'n c',
-    };
-    const keycloakAccount = {
-      firstName: 'John',
-      lastName: 'Doe',
-      email: 'john.doe@example.com',
+      access_token: accessToken,
     };
 
     fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);
-    fetchMock.get('https://keycloak.test/auth/realms/richie-realm/account/', keycloakAccount);
 
     const api = FonzieKeycloakAPIInterface(configuration);
     await expect(api.user.me()).resolves.toEqual({
@@ -53,14 +50,14 @@ describe('Fonzie Keycloak API', () => {
     });
   });
 
-  it('falls back to fonzie data when keycloak account call fails', async () => {
+  it('does not fail when the access token has no usable claims', async () => {
     const user = {
       username: 'test-richie-ncl',
       full_name: 'n c',
+      access_token: 'not-a-jwt',
     };
 
     fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);
-    fetchMock.get('https://keycloak.test/auth/realms/richie-realm/account/', 500);
 
     const api = FonzieKeycloakAPIInterface(configuration);
     await expect(api.user.me()).resolves.toEqual(user);

package/js/api/lms/openedx-fonzie-keycloak.ts

@@ -8,8 +8,25 @@ import { OpenEdxApiProfile } from 'types/openEdx';
 import { checkStatus } from 'api/utils';
 import { OpenEdxFullNameFormValues } from 'components/OpenEdxFullNameForm';
 import { location } from 'utils/indirection/window';
+import { base64Decode } from 'utils/base64Parser';
+import { Maybe } from 'types/utils';
 import OpenEdxHawthornApiInterface from './openedx-hawthorn';
 
+/**
+ * Extract claims from the JWT issued by Fonzie. The `user/me` route does not expose
+ * the email nor an up to date full name, but the token it returns always carries them.
+ */
+const getTokenClaims = (token: Maybe<string>): Maybe<{ email?: string; full_name?: string }> => {
+  if (!token) return undefined;
+
+  try {
+    const payload = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+    return JSON.parse(base64Decode(payload));
+  } catch {
+    return undefined;
+  }
+};
+
 /**
  *
  * OpenEdX completed by Fonzie API Implementation
@@ -46,27 +63,13 @@ const API = (APIConf: AuthenticationBackend): APILms => {
       me: async () => {
         const user = await ApiInterface.user.me();
         if (!user) return null;
-        try {
-          const keycloakAccount = await fetch(APIOptions.routes.user.account, {
-            credentials: 'include',
-            headers: {
-              Accept: 'application/json',
-              Authorization: `Bearer ${user.access_token}`,
-            },
-          }).then((res) => {
-            if (!res.ok) throw new Error(`Keycloak account fetch failed: ${res.status}`);
-            return res.json();
-          });
-          return {
-            ...user,
-            full_name:
-              [keycloakAccount.firstName, keycloakAccount.lastName].filter(Boolean).join(' ') ||
-              user.full_name,
-            email: keycloakAccount.email || user.email,
-          };
-        } catch {
-          return user;
-        }
+
+        const claims = getTokenClaims(user.access_token);
+        return {
+          ...user,
+          full_name: user.full_name || claims?.full_name,
+          email: user.email ?? claims?.email,
+        };
       },
       login: () => {
         const next = encodeURIComponent(location.href);

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,
@@ -706,6 +706,36 @@ describe.each([
     screen.getByTestId('walkthrough-banner');
   });
 
+  it('should render the account name and email from the OpenEdx profile', async () => {
+    const product = ProductFactory().one();
+    const paymentPlan = PaymentPlanFactory().one();
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      );
+
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    screen.getByRole('heading', { level: 4, name: 'Account email' });
+
+    await screen.findByText(openApiEdxProfile.email);
+
+    screen.getByText(
+      'This email will be used to send you confirmation mails, it is the one you created your account with.',
+    );
+  });
+
   it('should show a checkbox to waive withdrawal right if the product is not withdrawable', async () => {
     const product = ProductFactory().one();
     const paymentPlan = PaymentPlanFactory().one();

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,
   };
 });