richie-education 2.28.2-dev25 → 2.28.2-dev39

package/js/components/SaleTunnel/Sponsors/SaleTunnelSponsors.tsx

@@ -1,20 +1,43 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
-import { DashboardAvatar } from 'widgets/Dashboard/components/DashboardAvatar';
+import {
+  DashboardAvatar,
+  DashboardAvatarVariantEnum,
+} from 'widgets/Dashboard/components/DashboardAvatar';
+import { Organization } from 'types/Joanie';
+
+const messages = defineMessages({
+  blockTitle: {
+    id: 'components.SaleTunnel.Sponsors.SaleTunnelSponsors.blockTitle',
+    defaultMessage: 'University',
+    description: 'Title for the universities section in the sale tunnel',
+  },
+});
 
 export const SaleTunnelSponsors = () => {
   const {
     props: { organizations },
   } = useSaleTunnelContext();
   return (
-    <div className="sale-tunnel__sponsors">
-      {organizations?.map((organization) => {
-        if (organization.logo) {
-          return (
-            <img key={organization.id} src={organization.logo!.src} alt={organization.title} />
-          );
-        }
-        return <DashboardAvatar key={organization.id} title={organization.title} />;
-      })}
-    </div>
+    <>
+      <h3 className="block-title">
+        <FormattedMessage {...messages.blockTitle} />
+      </h3>
+      <div className="sale-tunnel__sponsors">{organizations?.map(OrganizationLogo)}</div>
+    </>
+  );
+};
+
+const OrganizationLogo = (organization: Organization) => {
+  if (organization.logo) {
+    return <img key={organization.id} src={organization.logo!.src} alt={organization.title} />;
+  }
+
+  return (
+    <DashboardAvatar
+      key={organization.id}
+      title={organization.title}
+      variant={DashboardAvatarVariantEnum.SQUARE}
+    />
   );
 };

package/js/components/SaleTunnel/_styles.scss

@@ -33,13 +33,15 @@
       flex: 1;
       overflow: hidden;
     }
+
+    &__column {
+      display: flex;
+      flex-direction: column;
+      gap: var(--c--theme--spacings--b);
+    }
   }
 
   &__information {
-    display: flex;
-    flex-direction: column;
-    gap: var(--c--theme--spacings--b);
-
     &__billing-address {
       display: flex;
       align-items: center;

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

@@ -56,12 +56,6 @@ describe('SaleTunnel / Credential', () => {
     return <SaleTunnel {...props} isOpen={true} onClose={() => {}} />;
   };
 
-  const formatPrice = (price: number, currency: string) =>
-    new Intl.NumberFormat('en', {
-      currency,
-      style: 'currency',
-    }).format(price);
-
   setupJoanieSession();
 
   beforeEach(() => {
@@ -98,6 +92,10 @@ describe('SaleTunnel / Credential', () => {
         `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
         [],
       )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        [],
+      )
       .post('https://joanie.endpoint/api/v1.0/orders/', (url, { body }) => {
         createOrderPayload = JSON.parse(body as any);
         return order;
@@ -120,7 +118,7 @@ describe('SaleTunnel / Credential', () => {
     await screen.findByText(getAddressLabel(billingAddress));
 
     const $button = screen.getByRole('button', {
-      name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+      name: `Subscribe`,
     }) as HTMLButtonElement;
 
     const $terms = screen.getByLabelText(

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -14,6 +14,7 @@ import CourseProductItem from 'widgets/SyllabusCourseRunsList/components/CourseP
 import {
   AddressFactory,
   CredentialOrderWithPaymentFactory,
+  PaymentInstallmentFactory,
   CourseProductRelationFactory,
 } from 'utils/test/factories/joanie';
 import { ACTIVE_ORDER_STATES, CourseRun } from 'types/Joanie';
@@ -85,12 +86,17 @@ describe('SaleTunnel', () => {
      * Initialization.
      */
     const relation = CourseProductRelationFactory().one();
+    const paymentSchedule = PaymentInstallmentFactory().many(2);
     const { product, course } = relation;
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
       relation,
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+      paymentSchedule,
+    );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
       product_id: product.id,
@@ -269,7 +275,7 @@ describe('SaleTunnel', () => {
       });
 
     const $button = screen.getByRole('button', {
-      name: `Pay ${priceFormatter(product.price_currency, product.price)}`,
+      name: `Subscribe`,
     }) as HTMLButtonElement;
     await user.click($button);
 

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

@@ -2,6 +2,8 @@ import { act, cleanup, fireEvent, screen, waitFor } from '@testing-library/react
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
 import userEvent from '@testing-library/user-event';
+import { within } from '@testing-library/dom';
+import { createIntl } from 'react-intl';
 import { OrderState, Product, ProductType } from 'types/Joanie';
 import {
   AddressFactory,
@@ -13,6 +15,7 @@ import {
   CredentialProductFactory,
   CreditCardFactory,
   EnrollmentFactory,
+  PaymentInstallmentFactory,
 } from 'utils/test/factories/joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -30,6 +33,8 @@ import { User } from 'types/User';
 import { OpenEdxApiProfile } from 'types/openEdx';
 import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { StringHelper } from 'utils/StringHelper';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -72,7 +77,9 @@ describe.each([
 
     const course = PacedCourseFactory().one();
     const enrollment =
-      productType === ProductType.CERTIFICATE ? EnrollmentFactory().one() : undefined;
+      productType === ProductType.CERTIFICATE
+        ? EnrollmentFactory({ course_run: { course } }).one()
+        : undefined;
 
     let richieUser: User;
     let openApiEdxProfile: OpenEdxApiProfile;
@@ -147,38 +154,6 @@ describe.each([
           };
     };
 
-    it('should render a payment button with a specific label when a credit card is provided', async () => {
-      const product = ProductFactory().one();
-      const creditCard = CreditCardFactory().one();
-      const address = AddressFactory().one();
-
-      fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/`, [], {
-        overwriteRoutes: true,
-      });
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
-        [],
-      );
-      fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address], {
-        overwriteRoutes: true,
-      });
-      fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
-        overwriteRoutes: true,
-      });
-
-      render(<Wrapper product={product} />, {
-        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-      });
-
-      const $button = (await screen.findByRole('button', {
-        name: `Pay in one click ${formatPrice(product.price, product.price_currency)}`,
-      })) as HTMLButtonElement;
-
-      // a billing address is missing, but the button stays enabled
-      // this allows the user to get feedback on what's missing to make the payment by clicking on the button
-      expect($button.disabled).toBe(false);
-    });
-
     it('should create an order only the first time the payment interface is shown, and not after aborting', async () => {
       const product = ProductFactory().one();
       const billingAddress = AddressFactory({
@@ -191,6 +166,10 @@ describe.each([
           `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-schedule/`,
+          [],
+        )
         .post('https://joanie.endpoint/api/v1.0/orders/', order)
         .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
           paymentInfo,
@@ -217,9 +196,10 @@ describe.each([
       const user = userEvent.setup({ delay: null });
       await user.click($terms);
 
-      const $button = screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
-      }) as HTMLButtonElement;
+      const $button = screen.getByRole<HTMLButtonElement>('button', {
+        name: `Subscribe`,
+      });
+      nbApiCalls += 1; // product payment-schedule call
 
       // - Payment button should not be disabled.
       expect($button.disabled).toBe(false);
@@ -348,6 +328,10 @@ describe.each([
           `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
           [initialOrder],
         )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+          [],
+        )
         .post('https://joanie.endpoint/api/v1.0/orders/', order)
         .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
           payment_info: paymentInfo,
@@ -376,9 +360,10 @@ describe.each([
       nbApiCalls += 1; // useProductOrder get order with filters
       nbApiCalls += 1; // get user account call.
       nbApiCalls += 1; // get user preferences call.
+      nbApiCalls += 1; // product payment schedule call.
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
       const $button = screen.getByRole('button', {
-        name: `Pay in one click ${formatPrice(product.price, product.price_currency)}`,
+        name: `Subscribe`,
       }) as HTMLButtonElement;
 
       // - Payment button should not be disabled.
@@ -387,7 +372,7 @@ describe.each([
       // - wait for address to be loaded.
       await screen.findByText(getAddressLabel(billingAddress));
 
-      // - User clicks on pay button
+      // - User clicks on Subscribe button
       fetchMock.get(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
         [orderSubmitted],
@@ -472,6 +457,10 @@ describe.each([
           `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
           [orderSubmitted],
         )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+          [],
+        )
         .post('https://joanie.endpoint/api/v1.0/orders/', order)
         .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
           payment_info: paymentInfo,
@@ -494,6 +483,7 @@ describe.each([
       nbApiCalls += 1; // fetcher order for userProductOrder
       nbApiCalls += 1; // get user account call.
       nbApiCalls += 1; // get user preferences call.
+      nbApiCalls += 1; // get product payment schedule.
       const apiCalls = fetchMock.calls().map((call) => call[0]);
       expect(apiCalls).toContain(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
@@ -506,7 +496,7 @@ describe.each([
       await user.click($terms);
 
       const $button = screen.getByRole('button', {
-        name: `Pay in one click ${formatPrice(product.price, product.price_currency)}`,
+        name: `Subscribe`,
       }) as HTMLButtonElement;
 
       // - wait for address to be loaded.
@@ -606,6 +596,10 @@ describe.each([
           `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-schedule/`,
+          [],
+        )
         .post('https://joanie.endpoint/api/v1.0/orders/', order)
         .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
           payment_info: paymentInfo,
@@ -624,6 +618,7 @@ describe.each([
       nbApiCalls += 1; // useProductOrder get order with filters
       nbApiCalls += 1; // get user account call.
       nbApiCalls += 1; // get user preferences call.
+      nbApiCalls += 1; // get product payment schedule.
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
       const $terms = screen.getByLabelText(
@@ -633,7 +628,7 @@ describe.each([
       await user.click($terms);
 
       const $button = screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+        name: `Subscribe`,
       }) as HTMLButtonElement;
 
       // - wait for address to be loaded.
@@ -675,7 +670,7 @@ describe.each([
       // - Payment button should have been restore to its idle state
       expect($button.disabled).toBe(false);
       screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+        name: 'Subscribe',
       });
     });
 
@@ -691,6 +686,10 @@ describe.each([
           `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-schedule/`,
+          [],
+        )
         .post('https://joanie.endpoint/api/v1.0/orders/', order)
         .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
           payment_info: paymentInfo,
@@ -709,6 +708,7 @@ describe.each([
       nbApiCalls += 1; // useProductOrder get order with filters
       nbApiCalls += 1; // get user account call.
       nbApiCalls += 1; // get user preferences call.
+      nbApiCalls += 1; // product payment schedule call.
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
       const $terms = screen.getByLabelText(
@@ -718,7 +718,7 @@ describe.each([
       await user.click($terms);
 
       const $button = screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+        name: `Subscribe`,
       }) as HTMLButtonElement;
 
       // - wait for address to be loaded.
@@ -762,7 +762,7 @@ describe.each([
       // - Payment button should have been restore to its idle state
       expect($button.disabled).toBe(false);
       screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+        name: `Subscribe`,
       });
 
       // - User clicks on pay button again
@@ -783,6 +783,10 @@ describe.each([
           `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-schedule/`,
+          [],
+        )
         .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
           overwriteRoutes: true,
         });
@@ -792,7 +796,7 @@ describe.each([
       });
 
       const $button = screen.getByRole('button', {
-        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+        name: 'Subscribe',
       }) as HTMLButtonElement;
 
       // - As all information are provided, payment button should not be disabled.
@@ -811,23 +815,15 @@ describe.each([
     it('should show a link to the platform terms and conditions', async () => {
       const product = ProductFactory().one();
 
-      const fetchOrderQueryParams =
-        product.type === ProductType.CREDENTIAL
-          ? {
-              course_code: course.code,
-              product_id: product.id,
-              state: ['pending', 'validated', 'submitted'],
-            }
-          : {
-              enrollment_id: enrollment?.id,
-              product_id: product.id,
-              state: ['pending', 'validated', 'submitted'],
-            };
-
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
-        [],
-      );
+      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-schedule/`,
+          [],
+        );
 
       render(<Wrapper product={product} />, {
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -836,5 +832,75 @@ describe.each([
       const $terms = screen.getByRole('link', { name: 'General Terms of Sale' });
       expect($terms).toHaveAttribute('href', '/en/about/terms-and-conditions/');
     });
+
+    it('should show the product payment schedule', async () => {
+      const intl = createIntl({ locale: 'en' });
+      const product = ProductFactory().one();
+      const schedule = PaymentInstallmentFactory().many(2);
+      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-schedule/`,
+          schedule,
+        );
+
+      render(<Wrapper product={product} />, {
+        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+      });
+
+      await screen.findByRole('heading', {
+        level: 4,
+        name: 'Payment schedule',
+      });
+
+      const scheduleTable = screen.getByRole('table');
+      const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+      expect(scheduleTableRows).toHaveLength(schedule.length);
+
+      scheduleTableRows.forEach((row, index) => {
+        const installment = schedule[index];
+        // A first column should show the installment index
+        within(row).getByRole('cell', {
+          name: (index + 1).toString(),
+        });
+        // A 2nd column should show the installment amount
+        within(row).getByRole('cell', {
+          name: formatPrice(installment.amount, installment.currency),
+        });
+        // A 3rd column should show the installment withdraw date
+        within(row).getByRole('cell', {
+          name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+            ...DEFAULT_DATE_FORMAT,
+          })}`,
+        });
+        // A 4th column should show the installment state
+        within(row).getByRole('cell', {
+          name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+        });
+      });
+    });
+
+    it('should show a walkthrough to explain the subscription process', async () => {
+      const product = ProductFactory().one();
+      const schedule = PaymentInstallmentFactory().many(2);
+      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-schedule/`,
+          schedule,
+        );
+
+      render(<Wrapper product={product} />, {
+        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+      });
+
+      screen.getByTestId('walkthrough-banner');
+    });
   },
 );

package/js/hooks/usePaymentSchedule.tsx

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { PaymentSchedule } from 'types/Joanie';
+import { Nullable } from 'types/utils';
+
+type PaymentScheduleFilters = {
+  course_code: string;
+  product_id: string;
+};
+
+export const usePaymentSchedule = (filters: PaymentScheduleFilters) => {
+  const queryKey = ['courses-products', ...Object.values(filters), 'payment-schedule'];
+
+  const api = useJoanieApi();
+  return useQuery<Nullable<PaymentSchedule>, Error>({
+    queryKey,
+    queryFn: () =>
+      api.courses.products.paymentSchedule.get({
+        id: filters.product_id,
+        course_id: filters.course_code,
+      }),
+  });
+};

package/js/hooks/useResources/useResourcesRoot.ts

@@ -136,21 +136,21 @@ export const useResourcesRoot = <
   const mutation = (session ? useSessionMutation : useMutation) as typeof useMutation;
 
   const writeHandlers = {
-    create: api.create
+    create: api?.create
       ? mutation({
           mutationFn: api.create,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorCreate)),
         })
       : undefined,
-    update: api.update
+    update: api?.update
       ? mutation({
           mutationFn: api.update,
           onSuccess,
           onError: () => setError(intl.formatMessage(actualMessages.errorUpdate)),
         })
       : undefined,
-    delete: api.delete
+    delete: api?.delete
       ? mutation({
           mutationFn: api.delete,
           onSuccess,

package/js/index.tsx

@@ -11,6 +11,7 @@ import 'core-js/modules/es.array.iterator';
 import 'core-js/modules/es.promise';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import countries from 'i18n-iso-countries';
 import { createRoot } from 'react-dom/client';
 import createQueryClient from 'utils/react-query/createQueryClient';
@@ -116,6 +117,7 @@ async function render() {
     const reactRoot = createRoot(rootContainer);
     reactRoot.render(
       <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
         <IntlProvider locale={locale} messages={translatedMessages} defaultLocale="en-US">
           <Root richieReactSpots={richieReactSpots} />
         </IntlProvider>

package/js/types/Joanie.ts

@@ -263,7 +263,10 @@ export enum OrderState {
   SUBMITTED = 'submitted',
   CANCELED = 'canceled',
   PENDING = 'pending',
+  PENDING_PAYMENT = 'pending_payment',
   VALIDATED = 'validated',
+  NO_PAYMENT = 'no_payment',
+  FAILED_PAYMENT = 'failed_payment',
 }
 
 export const ACTIVE_ORDER_STATES = [OrderState.PENDING, OrderState.VALIDATED, OrderState.SUBMITTED];
@@ -286,6 +289,7 @@ export interface Order {
   organization_id: Organization['id'];
   organization: Organization;
   order_group_id?: OrderGroup['id'];
+  payment_schedule?: PaymentSchedule;
 }
 
 export interface CredentialOrder extends Order {
@@ -416,6 +420,22 @@ export interface OrderPaymentInfo {
   payment_info: Payment;
 }
 
+export enum PaymentScheduleState {
+  PENDING = 'pending',
+  PAID = 'paid',
+  REFUSED = 'refused',
+}
+
+export interface PaymentInstallment {
+  id: string;
+  amount: number;
+  currency: string;
+  due_date: string;
+  state: PaymentScheduleState;
+}
+
+export type PaymentSchedule = readonly PaymentInstallment[];
+
 // - API
 export interface AddressCreationPayload extends Omit<Address, 'id' | 'is_main'> {
   is_main?: boolean;
@@ -436,6 +456,10 @@ export interface OrderCredentialCreationPayload extends AbstractOrderProductCrea
 
 export type OrderCreationPayload = OrderCertificateCreationPayload | OrderCredentialCreationPayload;
 
+export type OrderSubmitInstallmentPayment = {
+  credit_card_id?: string;
+};
+
 interface OrderAbortPayload {
   id: Order['id'];
   payment_id?: string;
@@ -558,6 +582,10 @@ interface APIUser {
     };
     submit(payload: OrderSubmitPayload): Promise<OrderPaymentInfo>;
     submit_for_signature(id: string): Promise<ContractInvitationLinkResponse>;
+    submit_installment_payment(
+      id: string,
+      payload?: OrderSubmitInstallmentPayment,
+    ): Promise<Payment>;
   };
   certificates: {
     download(id: string): Promise<File>;
@@ -614,6 +642,9 @@ export interface API {
       : Promise<PaginatedResponse<CourseListItem>>;
     products: {
       get(filters?: CourseProductQueryFilters): Promise<Nullable<CourseProductRelation>>;
+      paymentSchedule: {
+        get(filters?: CourseProductQueryFilters): Promise<Nullable<PaymentSchedule>>;
+      };
     };
     orders: {
       get(

package/js/utils/OrderHelper/index.ts

@@ -5,6 +5,7 @@ import {
   OrderState,
   ContractDefinition,
   NestedCourseOrder,
+  PaymentScheduleState,
 } from 'types/Joanie';
 
 export enum OrderStatus {
@@ -16,6 +17,9 @@ export enum OrderStatus {
   WAITING_COUNTER_SIGNATURE = 'waiting_counter_signature',
   COMPLETED = 'completed',
   ON_GOING = 'on_going',
+  NO_PAYMENT = 'no_payment',
+  PENDING_PAYMENT = 'pending_payment',
+  FAILED_PAYMENT = 'failed_payment',
 }
 
 /**
@@ -44,6 +48,9 @@ export class OrderHelper {
       [OrderState.SUBMITTED]: OrderStatus.SUBMITTED,
       [OrderState.PENDING]: OrderStatus.PENDING,
       [OrderState.CANCELED]: OrderStatus.CANCELED,
+      [OrderState.NO_PAYMENT]: OrderStatus.NO_PAYMENT,
+      [OrderState.PENDING_PAYMENT]: OrderStatus.PENDING_PAYMENT,
+      [OrderState.FAILED_PAYMENT]: OrderStatus.PENDING_PAYMENT,
     };
 
     if (order.state in orderStatusMap) {
@@ -87,4 +94,10 @@ export class OrderHelper {
       !order.contract.organization_signed_on
     );
   }
+
+  static getFailedInstallment(order: Order) {
+    return order.payment_schedule?.find(
+      (installment) => installment.state === PaymentScheduleState.REFUSED,
+    );
+  }
 }