richie-education 3.3.1-dev9 → 3.3.2-dev4

package/js/api/joanie.ts

@@ -173,6 +173,9 @@ export const getRoutes = () => {
         paymentPlan: {
           get: `${baseUrl}/courses/:course_id/products/:id/payment-plan/`,
         },
+        deepLink: {
+          get: `${baseUrl}/courses/:course_id/products/:id/deep-link/`,
+        },
       },
       orders: {
         get: `${baseUrl}/courses/:course_id/orders/:id/`,
@@ -585,6 +588,23 @@ const API = (): Joanie.API => {
             );
           },
         },
+        deepLink: {
+          get: async (
+            filters?: Joanie.CourseProductQueryFilters,
+          ): Promise<Joanie.OfferingDeepLink> => {
+            if (!filters) {
+              throw new Error('A course code and a product id are required to fetch a deep link');
+            } else if (!filters.course_id) {
+              throw new Error('A course code is required to fetch a deep link');
+            } else if (!filters.id) {
+              throw new Error('A product id is required to fetch a deep link');
+            }
+
+            return fetchWithJWT(buildApiUrl(ROUTES.courses.products.deepLink.get, filters)).then(
+              checkStatus,
+            );
+          },
+        },
       },
       orders: {
         get: async (filters?: Joanie.CourseOrderResourceQuery) => {

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

@@ -31,12 +31,36 @@ describe('Fonzie Keycloak API', () => {
     jest.clearAllMocks();
   });
 
-  it('uses its own route to get user information', async () => {
+  it('uses its own route to get user information and enriches with keycloak account', async () => {
     const user = {
-      username: faker.internet.username(),
+      username: 'test-richie-ncl',
+      full_name: 'n c',
+    };
+    const keycloakAccount = {
+      firstName: 'John',
+      lastName: 'Doe',
+      email: 'john.doe@example.com',
     };
 
     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({
+      ...user,
+      full_name: 'John Doe',
+      email: 'john.doe@example.com',
+    });
+  });
+
+  it('falls back to fonzie data when keycloak account call fails', async () => {
+    const user = {
+      username: 'test-richie-ncl',
+      full_name: 'n c',
+    };
+
+    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);
@@ -66,6 +90,15 @@ describe('Fonzie Keycloak API', () => {
     expect(fetchMock.calls()).toHaveLength(2);
   });
 
+  it('provides an updateUrl pointing to the keycloak account page', () => {
+    const api = FonzieKeycloakAPIInterface(configuration);
+    const { account } = api.user;
+    expect(typeof (account as any).updateUrl).toBe('function');
+    expect((account as any).updateUrl()).toBe(
+      'https://keycloak.test/auth/realms/richie-realm/account/',
+    );
+  });
+
   it('is able to retrieve access token within the session storage', () => {
     const accessToken = faker.string.uuid();
     sessionStorage.setItem(RICHIE_USER_TOKEN, accessToken);

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

@@ -43,6 +43,31 @@ const API = (APIConf: AuthenticationBackend): APILms => {
     ...ApiInterface,
     user: {
       ...ApiInterface.user,
+      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;
+        }
+      },
       login: () => {
         const next = encodeURIComponent(location.href);
         location.assign(`${APIOptions.routes.user.login}?next=${next}`);
@@ -51,6 +76,7 @@ const API = (APIConf: AuthenticationBackend): APILms => {
         return sessionStorage.getItem(RICHIE_USER_TOKEN);
       },
       account: {
+        updateUrl: () => APIOptions.routes.user.account,
         get: async (username: string) => {
           const options: RequestInit = {
             credentials: 'include',

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

@@ -115,6 +115,10 @@ describe('PurchaseButton', () => {
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/deep-link/`,
+        {},
       );
 
     render(
@@ -159,6 +163,10 @@ describe('PurchaseButton', () => {
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/deep-link/`,
+        {},
       );
     render(
       <Wrapper client={createTestQueryClient({ user })}>
@@ -201,6 +209,10 @@ describe('PurchaseButton', () => {
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/deep-link/`,
+        {},
       );
     delete product.remaining_order_count;
 

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

@@ -9,6 +9,7 @@ import {
   SaleTunnelStep,
   SaleTunnelContext,
   SaleTunnelContextType,
+  PaymentMode,
 } from 'components/SaleTunnel/GenericSaleTunnel';
 import { Address, PaymentSchedule } from 'types/Joanie';
 import {
@@ -74,6 +75,8 @@ describe('AddressSelector', () => {
           setSchedule,
           needsPayment: false,
           setNeedsPayment: jest.fn(),
+          paymentMode: PaymentMode.CLASSIC,
+          setPaymentMode: jest.fn(),
         }),
         [billingAddress, voucherCode, schedule],
       );

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -65,6 +65,8 @@ export interface SaleTunnelContextType {
   setSchedule: (schedule?: PaymentSchedule) => void;
   needsPayment: boolean;
   setNeedsPayment: (needsPayment: boolean) => void;
+  paymentMode: PaymentMode;
+  setPaymentMode: (mode: PaymentMode) => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -86,6 +88,11 @@ export enum SaleTunnelStep {
   SUCCESS,
 }
 
+export enum PaymentMode {
+  CLASSIC = 'classic',
+  CPF = 'cpf',
+}
+
 interface GenericSaleTunnelProps extends SaleTunnelProps {
   eventKey: string;
 
@@ -111,6 +118,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   );
   const [voucherCode, setVoucherCode] = useState<string>();
   const [needsPayment, setNeedsPayment] = useState(true);
+  const [paymentMode, setPaymentMode] = useState<PaymentMode>(PaymentMode.CLASSIC);
 
   const nextStep = useCallback(() => {
     if (order)
@@ -184,6 +192,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setSchedule,
       needsPayment,
       setNeedsPayment,
+      paymentMode,
+      setPaymentMode,
     }),
     [
       props,
@@ -197,6 +207,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       hasWaivedWithdrawalRight,
       voucherCode,
       needsPayment,
+      paymentMode,
     ],
   );
 

package/js/components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular.tsx

@@ -1,19 +1,21 @@
 import { ChangeEvent, useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
-import { Alert, Button, Input, VariantType } from '@openfun/cunningham-react';
+import { Alert, Button, Input, Radio, RadioGroup, VariantType } from '@openfun/cunningham-react';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { PaymentMode, useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
 import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 import { PaymentSchedule, ProductType } from 'types/Joanie';
 import { usePaymentPlan } from 'hooks/usePaymentPlan';
+import { useDeepLink } from 'hooks/useDeepLink';
 import { HttpError } from 'utils/errors/HttpError';
 import { APIBackend, KeycloakAccountApi } from 'types/api';
 import context from 'utils/context';
 import { AuthenticationApi } from 'api/authentication';
+import { UserHelper } from 'utils/UserHelper';
 
 const messages = defineMessages({
   title: {
@@ -122,6 +124,32 @@ const messages = defineMessages({
     description: 'Message displayed when the order is part of a batch order',
     defaultMessage: 'No billing information required. This order is covered by your organization.',
   },
+  paymentModeTitle: {
+    id: 'components.SaleTunnel.Information.paymentMode.title',
+    description: 'Title for the payment mode selection section',
+    defaultMessage: 'Payment method',
+  },
+  paymentModeClassic: {
+    id: 'components.SaleTunnel.Information.paymentMode.classic',
+    description: 'Label for the classic card payment option',
+    defaultMessage: 'Credit card payment',
+  },
+  paymentModeCpf: {
+    id: 'components.SaleTunnel.Information.paymentMode.cpf',
+    description: 'Label for the CPF (Mon Compte Formation) payment option',
+    defaultMessage: 'My Training Account (CPF)',
+  },
+  cpfDescription: {
+    id: 'components.SaleTunnel.Information.cpf.description',
+    description: 'Explanatory text for the CPF payment option',
+    defaultMessage:
+      'Pay for your training using your personal training account (CPF) on Mon Compte Formation.',
+  },
+  cpfButtonLabel: {
+    id: 'components.SaleTunnel.Information.cpf.buttonLabel',
+    description: 'Label for the button redirecting to Mon Compte Formation',
+    defaultMessage: 'Go to Mon Compte Formation',
+  },
 });
 
 export const SaleTunnelInformationSingular = () => {
@@ -133,6 +161,9 @@ export const SaleTunnelInformationSingular = () => {
     setSchedule,
     needsPayment,
     setNeedsPayment,
+    setHasWaivedWithdrawalRight,
+    paymentMode,
+    setPaymentMode,
   } = useSaleTunnelContext();
   const [voucherError, setVoucherError] = useState<HttpError | null>(null);
   const query = usePaymentPlan({
@@ -140,11 +171,17 @@ export const SaleTunnelInformationSingular = () => {
     product_id: props.product.id,
     ...(voucherCode ? { voucher_code: voucherCode } : {}),
   });
+  const deepLinkQuery = useDeepLink({
+    course_code: props.course?.code ?? props.enrollment!.course_run.course.code,
+    product_id: props.product.id,
+  });
   const schedule = query.data?.payment_schedule ?? props.paymentPlan?.payment_schedule;
   const price = query.data?.price ?? props.paymentPlan?.price;
   const discountedPrice = query.data?.discounted_price ?? props.paymentPlan?.discounted_price;
   const discount = query.data?.discount ?? props.paymentPlan?.discount;
-  const fromBatchOrder = query.data?.from_batch_order ?? props.paymentPlan?.from_batch_order;
+  const skipContractInputs =
+    query.data?.skip_contract_inputs ?? props.paymentPlan?.skip_contract_inputs;
+  const deepLink = deepLinkQuery.data?.deep_link;
 
   const isCredentialWithPrice =
     product.type === ProductType.CREDENTIAL &&
@@ -164,66 +201,99 @@ export const SaleTunnelInformationSingular = () => {
   }, [query.error, voucherCode, setVoucherCode]);
 
   useEffect(() => {
-    setNeedsPayment(!fromBatchOrder);
-  }, [fromBatchOrder, setNeedsPayment]);
+    setNeedsPayment(!skipContractInputs);
+    if (skipContractInputs) {
+      setHasWaivedWithdrawalRight(false);
+    }
+  }, [skipContractInputs, setNeedsPayment, setHasWaivedWithdrawalRight]);
 
-  const isKeycloakBackend = context?.authentication.backend === APIBackend.KEYCLOAK;
+  const intl = useIntl();
+  const isKeycloakBackend = [APIBackend.KEYCLOAK, APIBackend.FONZIE_KEYCLOAK].includes(
+    context?.authentication.backend as APIBackend,
+  );
 
   return (
     <>
-      {needsPayment && (
-        <div>
+      {deepLink && (
+        <div className="mb-s">
           <h3 className="block-title mb-t">
-            <FormattedMessage {...messages.title} />
-          </h3>
-          <div className="description mb-s">
-            <FormattedMessage {...messages.description} />
-          </div>
-          {isKeycloakBackend ? (
-            <KeycloakAccountEdit />
-          ) : (
-            <>
-              <OpenEdxFullNameForm />
-              <div className="mt-s">
-                <Email />
-              </div>
-            </>
-          )}
-          <AddressSelector />
-        </div>
-      )}
-      {!needsPayment && (
-        <div>
-          <h3 className="block-title">
-            <FormattedMessage {...messages.title} />
+            <FormattedMessage {...messages.paymentModeTitle} />
           </h3>
-          <Alert type={VariantType.NEUTRAL}>
-            <FormattedMessage {...messages.noBillingInformation} />
-          </Alert>
+          <RadioGroup>
+            <Radio
+              label={intl.formatMessage(messages.paymentModeClassic)}
+              value={PaymentMode.CLASSIC}
+              checked={paymentMode === PaymentMode.CLASSIC}
+              onChange={() => setPaymentMode(PaymentMode.CLASSIC)}
+            />
+            <Radio
+              label={intl.formatMessage(messages.paymentModeCpf)}
+              value={PaymentMode.CPF}
+              checked={paymentMode === PaymentMode.CPF}
+              onChange={() => setPaymentMode(PaymentMode.CPF)}
+            />
+          </RadioGroup>
         </div>
       )}
-      <div>
-        {isCredentialWithPrice &&
-          (schedule ? (
-            <PaymentScheduleBlock schedule={schedule!} />
-          ) : (
+      {paymentMode === PaymentMode.CPF ? (
+        <CpfPayment deepLink={deepLink!} />
+      ) : (
+        <>
+          {needsPayment && (
             <div>
-              <h4 className="block-title">
-                <FormattedMessage {...messages.paymentSchedule} />
-              </h4>
+              <h3 className="block-title mb-t">
+                <FormattedMessage {...messages.title} />
+              </h3>
+              <div className="description mb-s">
+                <FormattedMessage {...messages.description} />
+              </div>
+              {isKeycloakBackend ? (
+                <KeycloakAccountEdit />
+              ) : (
+                <>
+                  <OpenEdxFullNameForm />
+                  <div className="mt-s">
+                    <Email />
+                  </div>
+                </>
+              )}
+              <AddressSelector />
+            </div>
+          )}
+          {!needsPayment && (
+            <div>
+              <h3 className="block-title">
+                <FormattedMessage {...messages.title} />
+              </h3>
               <Alert type={VariantType.NEUTRAL}>
-                <FormattedMessage {...messages.noPaymentSchedule} />
+                <FormattedMessage {...messages.noBillingInformation} />
               </Alert>
             </div>
-          ))}
-        <Voucher
-          discount={discount}
-          voucherError={voucherError}
-          setVoucherError={setVoucherError}
-        />
-        <Total price={price} discountedPrice={discountedPrice} />
-        {needsPayment && <WithdrawRightCheckbox />}
-      </div>
+          )}
+          <div>
+            {isCredentialWithPrice &&
+              (schedule ? (
+                <PaymentScheduleBlock schedule={schedule!} />
+              ) : (
+                <div>
+                  <h4 className="block-title">
+                    <FormattedMessage {...messages.paymentSchedule} />
+                  </h4>
+                  <Alert type={VariantType.NEUTRAL}>
+                    <FormattedMessage {...messages.noPaymentSchedule} />
+                  </Alert>
+                </div>
+              ))}
+            <Voucher
+              discount={discount}
+              voucherError={voucherError}
+              setVoucherError={setVoucherError}
+            />
+            <Total price={price} discountedPrice={discountedPrice} />
+            {needsPayment && <WithdrawRightCheckbox />}
+          </div>
+        </>
+      )}
     </>
   );
 };
@@ -240,7 +310,7 @@ const KeycloakAccountEdit = () => {
             <h4>
               <FormattedMessage {...messages.keycloakUsernameLabel} />
             </h4>
-            <div className="fw-bold">{user?.username}</div>
+            <div className="fw-bold">{user ? UserHelper.getName(user) : ''}</div>
           </div>
           <div className="sale-tunnel__username__description">
             <FormattedMessage {...messages.keycloakUsernameInfo} />
@@ -422,3 +492,22 @@ const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
     </div>
   );
 };
+
+const CpfPayment = ({ deepLink }: { deepLink: string }) => {
+  return (
+    <div className="sale-tunnel__cpf">
+      <p className="description mb-s">
+        <FormattedMessage {...messages.cpfDescription} />
+      </p>
+      <Button
+        color="primary"
+        fullWidth={true}
+        href={deepLink}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <FormattedMessage {...messages.cpfButtonLabel} />
+      </Button>
+    </div>
+  );
+};

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Select } from '@openfun/cunningham-react';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { useSaleTunnelContext, PaymentMode } from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelInformationSingular } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationSingular';
 import { SaleTunnelInformationGroup } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup';
 import { ProductType } from 'types/Joanie';
@@ -36,7 +36,7 @@ export enum FormType {
 
 export const SaleTunnelInformation = () => {
   const intl = useIntl();
-  const { setBatchOrder, setSchedule, product } = useSaleTunnelContext();
+  const { setBatchOrder, setSchedule, setPaymentMode, product } = useSaleTunnelContext();
   const productType = product.type;
   const options = [
     { label: intl.formatMessage(messages.purchaseTypeOptionSingle), value: FormType.SINGULAR },
@@ -63,6 +63,7 @@ export const SaleTunnelInformation = () => {
               setPurchaseType(e.target.value as FormType);
               setBatchOrder(undefined);
               setSchedule(undefined);
+              setPaymentMode(PaymentMode.CLASSIC);
             }}
           />
         </div>

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

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Alert, Button, VariantType } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { PaymentMode, useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import { validationSchema } from 'components/SaleTunnel/SaleTunnelInformation/SaleTunnelInformationGroup';
 import { useOrders } from 'hooks/useOrders';
 import { useBatchOrder } from 'hooks/useBatchOrder';
@@ -107,7 +107,12 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     props: saleTunnelProps,
     voucherCode,
     needsPayment,
+    paymentMode,
   } = useSaleTunnelContext();
+
+  if (paymentMode === PaymentMode.CPF) {
+    return null;
+  }
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const { methods: batchOrderMethods } = useBatchOrder();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);

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

@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -99,7 +100,11 @@ describe('SaleTunnel / Credential', () => {
       .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
-      });
+      })
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        {},
+      );
 
     render(<Wrapper product={product} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
@@ -115,4 +120,106 @@ describe('SaleTunnel / Credential', () => {
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);
   });
+
+  it('should display CPF payment option and redirect to deepLink when deepLink is available', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const deepLink = 'https://placeholder.com/course/1';
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: deepLink },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    window.open = jest.fn();
+    const user = userEvent.setup({ delay: null });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', { level: 3, name: /payment method/i });
+
+    // - By default, credit card payment should be selected.
+    expect(screen.getByRole('radio', { name: /credit card payment/i })).toBeChecked();
+    expect(screen.getByRole('radio', { name: /my training account \(cpf\)/i })).not.toBeChecked();
+
+    await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
+
+    // - CPF description and redirect button should be visible.
+    expect(
+      screen.getByText(/pay for your training using your personal training account/i),
+    ).toBeInTheDocument();
+    const cpfButton = screen.getByRole('link', { name: /go to mon compte formation/i });
+
+    await user.click(cpfButton);
+  });
+
+  it('should not display CPF payment option when deepLink is null', async () => {
+    const course = PacedCourseFactory().one();
+    const product = CredentialProductFactory().one();
+    const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+        { deep_link: null },
+      )
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
+        overwriteRoutes: true,
+      });
+
+    render(<Wrapper product={product} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    // - wait for address to be loaded.
+    await screen.findByText(getAddressLabel(billingAddress));
+
+    // - Payment method section and CPF option should not be rendered.
+    expect(
+      screen.queryByRole('heading', { level: 3, name: /payment method/i }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('radio', { name: /my training account \(cpf\)/i }),
+    ).not.toBeInTheDocument();
+    expect(screen.queryByRole('radio', { name: /credit card payment/i })).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', { name: /go to mon compte formation/i }),
+    ).not.toBeInTheDocument();
+
+    // - Classic billing information section should be displayed.
+    expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
+  });
 });