richie-education 3.3.1 → 3.3.2-dev11

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-hawthorn.spec.ts

@@ -170,7 +170,7 @@ describe('OpenEdX Hawthorn API', () => {
         );
       });
 
-      it('throws HttpError.localizedMessage on enrollment failure', async () => {
+      it('throws HttpError.localizedMessage on enrollment failure for bad requests', async () => {
         fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
           status: HttpStatusCode.BAD_REQUEST,
           body: { localizedMessage: 'You are not authorized to enroll in this course' },
@@ -189,7 +189,7 @@ describe('OpenEdX Hawthorn API', () => {
         );
       });
 
-      it('throws HttpError on enrollment failure when localizedMessage property is not present in the payload', async () => {
+      it('throws HttpError on enrollment failure when localizedMessage property is not present in the payload for bad requests', async () => {
         fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
           status: HttpStatusCode.BAD_REQUEST,
           body: { message: 'Bad Request' },
@@ -202,6 +202,38 @@ describe('OpenEdX Hawthorn API', () => {
         ).rejects.toThrow(new HttpError(HttpStatusCode.BAD_REQUEST, 'Bad Request'));
       });
 
+      it('throws HttpError.localizedMessage on enrollment failure for forbidden requests', async () => {
+        fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
+          status: HttpStatusCode.FORBIDDEN,
+          body: { localizedMessage: 'You are not authorized to enroll in this course' },
+        });
+
+        await expect(
+          HawthornApi.enrollment.set(`https://demo.endpoint/courses?course_id=${courseId}`, {
+            username,
+          }),
+        ).rejects.toThrow(
+          new HttpError(
+            HttpStatusCode.FORBIDDEN,
+            'Forbidden',
+            'You are not authorized to enroll in this course',
+          ),
+        );
+      });
+
+      it('throws HttpError on enrollment failure when localizedMessage property is not present in the payload for forbidden requests', async () => {
+        fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, {
+          status: HttpStatusCode.FORBIDDEN,
+          body: { message: 'Forbidden' },
+        });
+
+        await expect(
+          HawthornApi.enrollment.set(`https://demo.endpoint/courses?course_id=${courseId}`, {
+            username,
+          }),
+        ).rejects.toThrow(new HttpError(HttpStatusCode.FORBIDDEN, 'Forbidden'));
+      });
+
       it('throws HttpError when response has no json payload', async () => {
         fetchMock.post(`${EDX_ENDPOINT}/api/enrollment/v1/enrollment`, HttpStatusCode.BAD_REQUEST);
 

package/js/api/lms/openedx-hawthorn.ts

@@ -115,7 +115,10 @@ const API = (APIConf: AuthenticationBackend | LMSBackend, options?: APIOptions):
         })
           .then(async (response) => {
             if (response.ok) return response.json();
-            if (response.status === HttpStatusCode.BAD_REQUEST) {
+            if (
+              response.status === HttpStatusCode.BAD_REQUEST ||
+              response.status === HttpStatusCode.FORBIDDEN
+            ) {
               if (response.headers.get('Content-Type') === 'application/json') {
                 const { localizedMessage } = await response.json();
                 throw new HttpError(response.status, response.statusText, localizedMessage);

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,15 +1,16 @@
 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';
@@ -123,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 = () => {
@@ -134,6 +161,9 @@ export const SaleTunnelInformationSingular = () => {
     setSchedule,
     needsPayment,
     setNeedsPayment,
+    setHasWaivedWithdrawalRight,
+    paymentMode,
+    setPaymentMode,
   } = useSaleTunnelContext();
   const [voucherError, setVoucherError] = useState<HttpError | null>(null);
   const query = usePaymentPlan({
@@ -141,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 &&
@@ -165,68 +201,99 @@ export const SaleTunnelInformationSingular = () => {
   }, [query.error, voucherCode, setVoucherCode]);
 
   useEffect(() => {
-    setNeedsPayment(!fromBatchOrder);
-  }, [fromBatchOrder, setNeedsPayment]);
+    setNeedsPayment(!skipContractInputs);
+    if (skipContractInputs) {
+      setHasWaivedWithdrawalRight(false);
+    }
+  }, [skipContractInputs, setNeedsPayment, setHasWaivedWithdrawalRight]);
 
+  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} />
+            <FormattedMessage {...messages.paymentModeTitle} />
           </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.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>
+        </>
+      )}
     </>
   );
 };
@@ -425,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();
+  });
 });

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

@@ -66,6 +66,10 @@ const setupBatchOrderMocks = (params: {
     `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
     paymentPlan,
   );
+  fetchMock.get(
+    `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+    {},
+  );
   fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
   fetchMock.get(
     `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify({
@@ -365,7 +369,7 @@ describe('SaleTunnel', () => {
       discounted_price: 0,
       discount: '-100%',
       payment_schedule: undefined,
-      from_batch_order: true,
+      skip_contract_inputs: true,
     }).one();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT100`,

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

@@ -116,6 +116,10 @@ describe('SaleTunnel', () => {
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
       paymentPlan,
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+      {},
+    );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
       product_id: product.id,
@@ -281,6 +285,11 @@ describe('SaleTunnel', () => {
       paymentPlanVoucher,
       { overwriteRoutes: true },
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/deep-link/`,
+      {},
+      { overwriteRoutes: true },
+    );
     await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
     await user.click(screen.getByRole('button', { name: 'Validate' }));
     screen.getByRole('heading', { name: 'Payment schedule' });

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

@@ -175,6 +175,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
@@ -188,6 +192,7 @@ describe.each([
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
     nbApiCalls += 1; // product payment-schedule call
+    nbApiCalls += 1; // product deep-link call
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -263,6 +268,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .post('https://joanie.endpoint/api/v1.0/orders/', deferred.promise)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
@@ -275,6 +284,7 @@ describe.each([
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
     nbApiCalls += 1; // get paymentPlan call.
+    nbApiCalls += 1; // get deep-link call.
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -333,6 +343,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .get('https://joanie.endpoint/api/v1.0/offerings/get-organizations/', []);
 
     render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -379,6 +393,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
         overwriteRoutes: true,
       })
@@ -390,7 +408,7 @@ describe.each([
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
-    nbApiCalls += 3;
+    nbApiCalls += 4;
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     await screen.findByTestId('sale-tunnel-save-payment-method-step');
@@ -415,6 +433,10 @@ describe.each([
           `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/`,
+          {},
+        )
         .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
           overwriteRoutes: true,
         })
@@ -426,7 +448,7 @@ describe.each([
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
       });
 
-      nbApiCalls += 3;
+      nbApiCalls += 4;
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
       await screen.findByTestId('sale-tunnel-sign-step');
@@ -446,6 +468,10 @@ describe.each([
       .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 paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -537,6 +563,10 @@ describe.each([
         .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
@@ -585,6 +615,10 @@ describe.each([
       .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(
@@ -659,6 +693,10 @@ describe.each([
       .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 paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -679,6 +717,10 @@ describe.each([
       .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 paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
@@ -699,6 +741,10 @@ describe.each([
       .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 paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
@@ -719,6 +765,10 @@ describe.each([
       .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 paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
@@ -762,6 +812,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
         {
@@ -807,7 +861,7 @@ describe.each([
     const paymentPlanVoucher = PaymentPlanFactory({
       discounted_price: 0.0,
       discount: '-100%',
-      from_batch_order: true,
+      skip_contract_inputs: true,
     }).one();
     const product = ProductFactory().one();
     fetchMock
@@ -819,6 +873,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT100`,
         paymentPlanVoucher,
@@ -871,6 +929,10 @@ describe.each([
         `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/`,
+        {},
+      )
       .get(
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
         paymentPlanVoucher,
@@ -1000,6 +1062,10 @@ describe('SaleTunnel with Keycloak backend', () => {
       .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} />, {
@@ -1054,6 +1120,10 @@ describe('SaleTunnel with Keycloak backend', () => {
       .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} />, {

package/js/hooks/useDeepLink.tsx

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { OfferingDeepLink } from 'types/Joanie';
+import { HttpError } from 'utils/errors/HttpError';
+
+type DeepLinkFilters = {
+  course_code: string;
+  product_id: string;
+};
+
+export const useDeepLink = (filters: DeepLinkFilters) => {
+  const api = useJoanieApi();
+  return useQuery<OfferingDeepLink, HttpError>({
+    queryKey: ['courses-products', ...Object.values(filters), 'deep-link'],
+    queryFn: () =>
+      api.courses.products.deepLink.get({
+        id: filters.product_id,
+        course_id: filters.course_code,
+      }),
+  });
+};

package/js/pages/TeacherDashboardOrganizationQuotes/index.full-process.spec.tsx

@@ -37,7 +37,7 @@ describe('full process for the organization quotes dashboard', () => {
 
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: true,
+        can_manage_batch_order_agreement: true,
         confirm_bank_transfer: true,
         confirm_quote: true,
         download_quote: true,
@@ -206,7 +206,7 @@ describe('full process for the organization quotes dashboard', () => {
     fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/`, []);
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: true,
+        can_manage_batch_order_agreement: true,
         confirm_bank_transfer: true,
         confirm_quote: true,
         download_quote: true,

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

@@ -165,7 +165,7 @@ describe('pages/TeacherDashboardOrganizationQuotes', () => {
 
     const organization = OrganizationFactory({
       abilities: {
-        can_submit_for_signature_batch_order: false,
+        can_manage_batch_order_agreement: false,
         confirm_bank_transfer: false,
         confirm_quote: false,
         download_quote: true,

package/js/pages/TeacherDashboardOrganizationQuotes/index.tsx

@@ -415,7 +415,7 @@ const TeacherDashboardOrganizationQuotes = () => {
     const submitForSignatureButton = (
       <Button
         size="small"
-        disabled={batchOrder.contract_submitted || !abilities?.can_submit_for_signature_batch_order}
+        disabled={batchOrder.contract_submitted || !abilities?.can_manage_batch_order_agreement}
         onClick={() =>
           !batchOrder.contract_submitted && handleSubmitForSignature(quote.batch_order.id)
         }

package/js/types/Joanie.ts

@@ -36,7 +36,7 @@ export interface Organization {
   dpo_email: Nullable<string>;
   address?: Address;
   abilities: {
-    can_submit_for_signature_batch_order: boolean;
+    can_manage_batch_order_agreement: boolean;
     confirm_bank_transfer: boolean;
     confirm_quote: boolean;
     delete: boolean;
@@ -221,6 +221,10 @@ export interface Offering extends OfferingLight {
   is_withdrawable: boolean;
   rules?: OfferingRule;
 }
+
+export interface OfferingDeepLink {
+  deep_link: Nullable<string>;
+}
 export function isOffering(
   entity: CourseListItem | OfferingLight | RichieCourse,
 ): entity is OfferingLight {
@@ -657,7 +661,7 @@ export interface PaymentPlan {
   discount?: string;
   discounted_price?: number;
   payment_schedule: PaymentSchedule;
-  from_batch_order: boolean;
+  skip_contract_inputs: boolean;
 }
 
 // - API
@@ -891,6 +895,9 @@ export interface API {
       paymentPlan: {
         get(filters?: CourseProductQueryFilters): Promise<Nullable<PaymentPlan>>;
       };
+      deepLink: {
+        get(filters?: CourseProductQueryFilters): Promise<OfferingDeepLink>;
+      };
     };
     orders: {
       get(

package/js/utils/test/factories/joanie.ts

@@ -51,7 +51,11 @@ import { Payment, PaymentMethod, PaymentProviders } from 'components/PaymentInte
 import { CourseStateFactory } from 'utils/test/factories/richie';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { JoanieUserApiAbilityActions, JoanieUserProfile } from 'types/User';
-import { SaleTunnelContextType, SaleTunnelStep } from 'components/SaleTunnel/GenericSaleTunnel';
+import {
+  SaleTunnelContextType,
+  SaleTunnelStep,
+  PaymentMode,
+} from 'components/SaleTunnel/GenericSaleTunnel';
 import { SaleTunnelProps } from 'components/SaleTunnel';
 import { noop } from 'utils/index';
 import { factory } from './factories';
@@ -172,7 +176,7 @@ export const OrganizationFactory = factory((): Organization => {
     contact_phone: faker.phone.number(),
     address: AddressFactory().one(),
     abilities: {
-      can_submit_for_signature_batch_order: faker.datatype.boolean(),
+      can_manage_batch_order_agreement: faker.datatype.boolean(),
       confirm_bank_transfer: faker.datatype.boolean(),
       confirm_quote: faker.datatype.boolean(),
       delete: faker.datatype.boolean(),
@@ -453,7 +457,7 @@ export const PaymentPlanFactory = factory((): PaymentPlan => {
     price: faker.number.int({ min: 1, max: 1000, multipleOf: 10 }),
     discount: undefined,
     discounted_price: undefined,
-    from_batch_order: false,
+    skip_contract_inputs: false,
   };
 });
 
@@ -670,5 +674,7 @@ export const SaleTunnelContextFactory = factory(
     setSchedule: noop,
     needsPayment: true,
     setNeedsPayment: noop,
+    paymentMode: PaymentMode.CLASSIC,
+    setPaymentMode: noop,
   }),
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.3.1",
+  "version": "3.3.2-dev11",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -9,6 +9,7 @@
     "extract-translations": "formatjs extract './**/*.ts*' --ignore ./node_modules --ignore './**/*.d.ts' --out-file './i18n/frontend.json' --id-interpolation-pattern '[sha512:contenthash:base64:6]' --format crowdin",
     "compile-translations": "./i18n/compile-translations.js",
     "lint": "eslint . 'js/**/*.ts?(x)'",
+    "prettier-check": "prettier --check 'js/**/*.+(ts|tsx|json|js|jsx)' '*.+(ts|tsx|json|js|jsx)' '**/*.+(css|scss)'",
     "prettier-write": "prettier --write 'js/**/*.+(ts|tsx|json|js|jsx)' '*.+(ts|tsx|json|js|jsx)' '**/*.+(css|scss)'",
     "build-sass": "sass scss/_main.scss ../richie/static/richie/css/main.css --load-path=node_modules",
     "build-sass-production": "sass scss/_main.scss ../richie/static/richie/css/main.css --style=compressed --load-path=node_modules",