richie-education 2.30.1-dev9 → 2.31.1-dev4

package/i18n/locales/ru-RU.json

@@ -1355,6 +1355,34 @@
     "description": "Message explaining the subscription process with a training agreement to sign and a payment method to set.",
     "message": "To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method."
   },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate .waiveCheckboxHelperClause2": {
+    "description": "Second clause item for the waiver checkbox.",
+    "message": "I understand that if I access the exam during this period, I expressly waive my right of withdrawal."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate.waiveCheckboxHelperClause1": {
+    "description": "First clause item for the waiver checkbox.",
+    "message": "I acknowledge that I have been informed of my legal right of withdrawal, which allows me to cancel my registration within 14 days from the date of payment."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate.waiverLabel": {
+    "description": "Text to explain why the user has to waive to its withdrawal right.",
+    "message": "If you access the exam, you acknowledge waiving your 14-day withdrawal right, as provided for in Article L221-18 of the French Consumer Code."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause1": {
+    "description": "First clause item for the waiver checkbox.",
+    "message": "I acknowledge that I have expressly requested to begin the training before the expiration date of the withdrawal period."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause2": {
+    "description": "Second clause item for the waiver checkbox.",
+    "message": "I expressly waive my right of withdrawal in order to begin the training before the expiration of the withdrawal period."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiverLabel": {
+    "description": "Text to explain why the user has to waive to its withdrawal right.",
+    "message": "The training program you wish to enroll in begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code. You must check the box below to proceed with your registration."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel": {
+    "description": "Label of the checkbox to waive the withdrawal right.",
+    "message": "By checking this box:"
+  },
   "components.SaleTunnel.callToActionDescription": {
     "description": "Additional description announced by screen readers when focusing the call to action buying button",
     "message": "Purchase {product}"
@@ -1535,6 +1563,10 @@
     "description": "Error message shown when order creation request failed because there is no remaining available seat for the product.",
     "message": "There are no more places available for this product."
   },
+  "components.SubscriptionButton.errorWithdrawalRight": {
+    "description": "Error message shown when the user must waive its withdrawal right but doesn't.",
+    "message": "You must waive your withdrawal right."
+  },
   "components.SubscriptionButton.orderCreationInProgress": {
     "description": "Label for screen reader when an order creation is in progress.",
     "message": "Order creation in progress"

package/i18n/locales/vi-VN.json

@@ -1355,6 +1355,34 @@
     "description": "Message explaining the subscription process with a training agreement to sign and a payment method to set.",
     "message": "To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method."
   },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate .waiveCheckboxHelperClause2": {
+    "description": "Second clause item for the waiver checkbox.",
+    "message": "I understand that if I access the exam during this period, I expressly waive my right of withdrawal."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate.waiveCheckboxHelperClause1": {
+    "description": "First clause item for the waiver checkbox.",
+    "message": "I acknowledge that I have been informed of my legal right of withdrawal, which allows me to cancel my registration within 14 days from the date of payment."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.certificate.waiverLabel": {
+    "description": "Text to explain why the user has to waive to its withdrawal right.",
+    "message": "If you access the exam, you acknowledge waiving your 14-day withdrawal right, as provided for in Article L221-18 of the French Consumer Code."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause1": {
+    "description": "First clause item for the waiver checkbox.",
+    "message": "I acknowledge that I have expressly requested to begin the training before the expiration date of the withdrawal period."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause2": {
+    "description": "Second clause item for the waiver checkbox.",
+    "message": "I expressly waive my right of withdrawal in order to begin the training before the expiration of the withdrawal period."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.credential.waiverLabel": {
+    "description": "Text to explain why the user has to waive to its withdrawal right.",
+    "message": "The training program you wish to enroll in begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code. You must check the box below to proceed with your registration."
+  },
+  "components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel": {
+    "description": "Label of the checkbox to waive the withdrawal right.",
+    "message": "By checking this box:"
+  },
   "components.SaleTunnel.callToActionDescription": {
     "description": "Additional description announced by screen readers when focusing the call to action buying button",
     "message": "Purchase {product}"
@@ -1535,6 +1563,10 @@
     "description": "Error message shown when order creation request failed because there is no remaining available seat for the product.",
     "message": "There are no more places available for this product."
   },
+  "components.SubscriptionButton.errorWithdrawalRight": {
+    "description": "Error message shown when the user must waive its withdrawal right but doesn't.",
+    "message": "You must waive your withdrawal right."
+  },
   "components.SubscriptionButton.orderCreationInProgress": {
     "description": "Label for screen reader when an order creation is in progress.",
     "message": "Order creation in progress"

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

@@ -22,7 +22,7 @@ describe('Fonzie API', () => {
 
   it('uses its own route to get user information', async () => {
     const user = {
-      username: faker.internet.userName(),
+      username: faker.internet.username(),
     };
 
     fetchMock.get('https://demo.endpoint.api/api/v1.0/user/me', user);

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

@@ -48,7 +48,7 @@ describe('OpenEdX Hawthorn API', () => {
   describe('enrollment', () => {
     beforeEach(() => {
       courseId = faker.string.uuid();
-      username = faker.internet.userName();
+      username = faker.internet.username();
       fetchMock.restore();
       mockHandle.mockRestore();
     });

package/js/components/CourseGlimpse/utils.ts

@@ -3,14 +3,14 @@ import { generatePath } from 'react-router-dom';
 import { Course as RichieCourse, isRichieCourse } from 'types/Course';
 import {
   CourseListItem as JoanieCourse,
-  CourseProductRelation,
+  CourseProductRelationLight,
   isCourseProductRelation,
 } from 'types/Joanie';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherDashboardPaths';
 import { CourseGlimpseCourse } from '.';
 
 const getCourseGlimpsePropsFromCourseProductRelation = (
-  courseProductRelation: CourseProductRelation,
+  courseProductRelation: CourseProductRelationLight,
   intl: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {
@@ -95,7 +95,7 @@ const getCourseGlimpsePropsFromJoanieCourse = (
 };
 
 export const getCourseGlimpseProps = (
-  course: RichieCourse | (JoanieCourse | CourseProductRelation),
+  course: RichieCourse | (JoanieCourse | CourseProductRelationLight),
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse => {

package/js/components/CourseGlimpseList/utils.ts

@@ -1,10 +1,10 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelation, CourseListItem as JoanieCourse } from 'types/Joanie';
+import { CourseProductRelationLight, CourseListItem as JoanieCourse } from 'types/Joanie';
 import { Course as RichieCourse } from 'types/Course';
 import { CourseGlimpseCourse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 
 export const getCourseGlimpseListProps = (
-  courses: RichieCourse[] | (JoanieCourse | CourseProductRelation)[],
+  courses: RichieCourse[] | (JoanieCourse | CourseProductRelationLight)[],
   intl?: IntlShape,
   organizationId?: string,
 ): CourseGlimpseCourse[] => {

package/js/components/PaymentInterfaces/types.ts

@@ -8,6 +8,7 @@ export enum SubscriptionErrorMessageId {
   ERROR_ADDRESS = 'errorAddress',
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
+  ERROR_WITHDRAWAL_RIGHT = 'errorWithdrawalRight',
 }
 
 export enum PaymentProviders {

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

@@ -91,6 +91,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: '00000' }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -122,6 +123,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -164,6 +166,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -207,6 +210,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -243,6 +247,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -284,6 +289,7 @@ describe('PurchaseButton', () => {
             product={product}
             disabled={false}
             course={PacedCourseFactory({ code: courseCode }).one()}
+            isWithdrawable={true}
           />
         </Wrapper>,
       );
@@ -333,7 +339,12 @@ describe('PurchaseButton', () => {
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+          <PurchaseButton
+            product={product}
+            disabled={false}
+            enrollment={enrollment}
+            isWithdrawable={true}
+          />
         </Wrapper>,
       );
 
@@ -390,7 +401,12 @@ describe('PurchaseButton', () => {
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })}>
-          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+          <PurchaseButton
+            product={product}
+            disabled={false}
+            enrollment={enrollment}
+            isWithdrawable={true}
+          />
         </Wrapper>,
       );
 
@@ -428,6 +444,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={false}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );
@@ -462,6 +479,7 @@ describe('PurchaseButton', () => {
           product={product}
           disabled={true}
           course={PacedCourseFactory({ code: courseCode }).one()}
+          isWithdrawable={true}
         />
       </Wrapper>,
     );

package/js/components/PurchaseButton/index.tsx

@@ -43,6 +43,7 @@ const messages = defineMessages({
 interface PurchaseButtonPropsBase {
   product: Joanie.CredentialProduct | Joanie.CertificateProduct;
   orderGroup?: Joanie.OrderGroup;
+  isWithdrawable: boolean;
   disabled?: boolean;
   className?: string;
   buttonProps?: ButtonProps;
@@ -67,6 +68,7 @@ const PurchaseButton = ({
   course,
   enrollment,
   orderGroup,
+  isWithdrawable,
   organizations,
   disabled = false,
   className,
@@ -141,6 +143,7 @@ const PurchaseButton = ({
         enrollment={enrollment}
         orderGroup={orderGroup}
         course={course}
+        isWithdrawable={isWithdrawable}
         onFinish={onFinish}
       />
     </>

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

@@ -63,6 +63,8 @@ describe('AddressSelector', () => {
           unregisterSubmitCallback: jest.fn(),
           runSubmitCallbacks: jest.fn(),
           nextStep: jest.fn(),
+          hasWaivedWithdrawalRight: false,
+          setHasWaivedWithdrawalRight: jest.fn(),
         }),
         [billingAddress],
       );

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -35,6 +35,8 @@ export interface SaleTunnelContextType {
   setBillingAddress: (address?: Address) => void;
   creditCard?: CreditCard;
   setCreditCard: (creditCard?: CreditCard) => void;
+  hasWaivedWithdrawalRight: boolean;
+  setHasWaivedWithdrawalRight: (hasWaivedWithdrawalRight: boolean) => void;
   registerSubmitCallback: (key: string, callback: () => Promise<void>) => void;
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
@@ -76,6 +78,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
+  const [hasWaivedWithdrawalRight, setHasWaivedWithdrawalRight] = useState(false);
   const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
@@ -115,6 +118,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       setBillingAddress,
       creditCard,
       setCreditCard,
+      hasWaivedWithdrawalRight,
+      setHasWaivedWithdrawalRight,
       nextStep,
       step,
       registerSubmitCallback: (key, callback) => {
@@ -131,7 +136,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
         await Promise.all(Array.from(submitCallbacks.values()).map((cb) => cb()));
       },
     }),
-    [props, order, billingAddress, creditCard, step, submitCallbacks],
+    [props, order, billingAddress, creditCard, step, submitCallbacks, hasWaivedWithdrawalRight],
   );
 
   return (

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

@@ -7,6 +7,7 @@ import { useSession } from 'contexts/SessionContext';
 import useOpenEdxProfile from 'hooks/useOpenEdxProfile';
 import { usePaymentSchedule } from 'hooks/usePaymentSchedule';
 import { Spinner } from 'components/Spinner';
+import WithdrawRightCheckbox from 'components/SaleTunnel/WithdrawRightCheckbox';
 
 const messages = defineMessages({
   title: {
@@ -71,6 +72,7 @@ export const SaleTunnelInformation = () => {
       <div>
         <PaymentScheduleBlock />
         <Total />
+        <WithdrawRightCheckbox />
       </div>
     </div>
   );

package/js/components/SaleTunnel/SubscriptionButton/_styles.scss

@@ -4,4 +4,12 @@
     margin-top: 0.5rem;
     margin-bottom: 0;
   }
+
+  &__waiveCheckbox {
+    & > .waiveCheckbox__input {
+      /* Just add 1 px offset to prevent border input to be hidden
+         due to the overflow hidden applied to the parent block */
+      margin-left: 1px;
+    }
+  }
 }

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

@@ -1,4 +1,4 @@
-import { useMemo, useEffect, useState } from 'react';
+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';
@@ -50,6 +50,11 @@ const messages = defineMessages({
     description: "Error message shown when the user didn't select a billing address.",
     id: 'components.SubscriptionButton.errorAddress',
   },
+  errorWithdrawalRight: {
+    defaultMessage: 'You must waive your withdrawal right.',
+    description: "Error message shown when the user must waive its withdrawal right but doesn't.",
+    id: 'components.SubscriptionButton.errorWithdrawalRight',
+  },
   orderCreationInProgress: {
     defaultMessage: 'Order creation in progress',
     description: 'Label for screen reader when an order creation is in progress.',
@@ -65,7 +70,10 @@ enum ComponentStates {
 
 interface Props {
   buildOrderPayload: (
-    payload: Pick<OrderCreationPayload, 'product_id' | 'billing_address' | 'order_group_id'>,
+    payload: Pick<
+      OrderCreationPayload,
+      'product_id' | 'billing_address' | 'order_group_id' | 'has_waived_withdrawal_right'
+    >,
   ) => OrderCreationPayload;
 }
 
@@ -74,6 +82,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     order,
     creditCard,
     billingAddress,
+    hasWaivedWithdrawalRight,
     product,
     nextStep,
     runSubmitCallbacks,
@@ -107,10 +116,16 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
+    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight) {
+      handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
+      return;
+    }
+
     const payload = buildOrderPayload({
       product_id: product.id,
       billing_address: billingAddress!,
       order_group_id: saleTunnelProps.orderGroup?.id,
+      has_waived_withdrawal_right: hasWaivedWithdrawalRight,
     });
 
     orderMethods.create(payload, {

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

@@ -0,0 +1,105 @@
+import { Alert, Checkbox, VariantType } from '@openfun/cunningham-react';
+import { useCallback, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { ProductType } from 'types/Joanie';
+
+const messages = defineMessages({
+  waiveCheckboxLabel: {
+    defaultMessage: 'By checking this box:',
+    description: 'Label of the checkbox to waive the withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel',
+  },
+});
+
+const credentialProductMessages = defineMessages({
+  waiveCheckboxExplanation: {
+    defaultMessage:
+      'The training program you wish to enroll in begins before the end of the 14-day withdrawal period mentioned in Article L221-18 of the French Consumer Code. You must check the box below to proceed with your registration.',
+    description: 'Text to explain why the user has to waive to its withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiverLabel',
+  },
+  waiveCheckboxHelperClause1: {
+    defaultMessage:
+      'I acknowledge that I have expressly requested to begin the training before the expiration date of the withdrawal period.',
+    description: 'First clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause1',
+  },
+  waiveCheckboxHelperClause2: {
+    defaultMessage:
+      'I expressly waive my right of withdrawal in order to begin the training before the expiration of the withdrawal period.',
+    description: 'Second clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.credential.waiveCheckboxHelperClause2',
+  },
+});
+
+const certificateProductMessages = defineMessages({
+  waiveCheckboxExplanation: {
+    defaultMessage:
+      'If you access the exam, you acknowledge waiving your 14-day withdrawal right, as provided for in Article L221-18 of the French Consumer Code.',
+    description: 'Text to explain why the user has to waive to its withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate.waiverLabel',
+  },
+  waiveCheckboxHelperClause1: {
+    defaultMessage:
+      'I acknowledge that I have been informed of my legal right of withdrawal, which allows me to cancel my registration within 14 days from the date of payment.',
+    description: 'First clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate.waiveCheckboxHelperClause1',
+  },
+  waiveCheckboxHelperClause2: {
+    defaultMessage:
+      'I understand that if I access the exam during this period, I expressly waive my right of withdrawal.',
+    description: 'Second clause item for the waiver checkbox.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.certificate .waiveCheckboxHelperClause2',
+  },
+});
+
+const WithdrawRightCheckbox = () => {
+  const {
+    props: { isWithdrawable, product },
+    registerSubmitCallback,
+    unregisterSubmitCallback,
+    hasWaivedWithdrawalRight,
+    setHasWaivedWithdrawalRight,
+  } = useSaleTunnelContext();
+  const intl = useIntl();
+  const clauseMessages =
+    product.type === ProductType.CERTIFICATE
+      ? certificateProductMessages
+      : credentialProductMessages;
+  const [hasErrorState, setHasError] = useState(false);
+  const setError = useCallback(async () => {
+    setHasError(!isWithdrawable && !hasWaivedWithdrawalRight);
+  }, [hasWaivedWithdrawalRight, isWithdrawable]);
+
+  useEffect(() => {
+    registerSubmitCallback('withdrawalRight', setError);
+    return () => {
+      unregisterSubmitCallback('withdrawalRight');
+    };
+  }, [setError]);
+
+  if (isWithdrawable) return null;
+  return (
+    <section
+      className="mt-t subscription-button__waiveCheckbox"
+      data-testid="withdraw-right-checkbox"
+    >
+      <Alert type={hasErrorState ? VariantType.ERROR : VariantType.WARNING} className="mb-s">
+        <FormattedMessage {...clauseMessages.waiveCheckboxExplanation} />
+      </Alert>
+      <Checkbox
+        className="waiveCheckbox__input"
+        label={intl.formatMessage(messages.waiveCheckboxLabel)}
+        checked={hasWaivedWithdrawalRight}
+        onChange={(e) => setHasWaivedWithdrawalRight(e.target.checked)}
+        textItems={[
+          intl.formatMessage(clauseMessages.waiveCheckboxHelperClause1),
+          intl.formatMessage(clauseMessages.waiveCheckboxHelperClause2),
+        ]}
+      />
+    </section>
+  );
+};
+
+export default WithdrawRightCheckbox;

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

@@ -53,8 +53,8 @@ describe('SaleTunnel / Credential', () => {
   let richieUser: User;
   let openApiEdxProfile: OpenEdxApiProfile;
 
-  const Wrapper = (props: Omit<SaleTunnelProps, 'isOpen' | 'onClose'>) => {
-    return <SaleTunnel {...props} isOpen={true} onClose={() => {}} />;
+  const Wrapper = (props: Omit<SaleTunnelProps, 'isWithdrawable' | 'isOpen' | 'onClose'>) => {
+    return <SaleTunnel {...props} isWithdrawable={true} isOpen={true} onClose={() => {}} />;
   };
 
   setupJoanieSession();

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

@@ -20,6 +20,7 @@ import {
   CreditCardFactory,
   PaymentFactory,
   PaymentInstallmentFactory,
+  ProductFactory,
 } from 'utils/test/factories/joanie';
 import { CourseRun, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import { Priority } from 'types';
@@ -97,9 +98,13 @@ describe('SaleTunnel', () => {
      * Initialization.
      */
     const course = PacedCourseFactory().one();
-    const relation = CourseProductRelationFactory({ course }).one();
+    const product = ProductFactory().one();
+    const relation = CourseProductRelationFactory({
+      course,
+      product,
+      is_withdrawable: false,
+    }).one();
     const paymentSchedule = PaymentInstallmentFactory().many(2);
-    const { product } = relation;
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
@@ -265,6 +270,13 @@ describe('SaleTunnel', () => {
         priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
     );
 
+    /**
+     * Make sure the checkbox to waive withdrawal right is displayed
+     */
+    const $waiveCheckbox = within(screen.getByTestId('withdraw-right-checkbox')).getByRole(
+      'checkbox',
+    );
+
     /**
      * Subscribe
      */
@@ -282,6 +294,14 @@ describe('SaleTunnel', () => {
     }) as HTMLButtonElement;
     await user.click($button);
 
+    /**
+     * An error should be displayed if the user has not waived its withdrawal right.
+     */
+    screen.getByText('You must waive your withdrawal right.');
+
+    await user.click($waiveCheckbox);
+    await user.click($button);
+
     order.state = OrderState.TO_SAVE_PAYMENT_METHOD;
     order.contract = ContractFactory({ student_signed_on: new Date().toISOString() }).one();