richie 2.30.0__py2.py3-none-any.whl → 2.30.1.dev21__py2.py3-none-any.whl

frontend/jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   resolver: '<rootDir>/jest/resolver.js',
   transformIgnorePatterns: [
-    'node_modules/(?!(lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
+    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
   ],
   globals: {
     RICHIE_VERSION: 'test',

frontend/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 => {

frontend/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[] => {

frontend/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 {

frontend/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>,
     );

frontend/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}
       />
     </>

frontend/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],
       );

frontend/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 (

frontend/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>
   );

frontend/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;
+    }
+  }
 }

frontend/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, {

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

@@ -0,0 +1,59 @@
+import { Alert, Checkbox, VariantType } from '@openfun/cunningham-react';
+import { useCallback, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage } from 'react-intl/lib';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+
+const messages = defineMessages({
+  waiveCheckboxExplanation: {
+    defaultMessage:
+      'This training will start before the end of your withdrawal period. You must waive it to subscribe.',
+    description: 'Text to explain why the user has to waive to its withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiverLabel',
+  },
+  waiveCheckboxLabel: {
+    defaultMessage: 'I waive my right of withdrawal',
+    description: 'Label of the checkbox to waive the withdrawal right.',
+    id: 'components.SaleTunnel.WithdrawRightCheckbox.waiveCheckboxLabel',
+  },
+});
+
+const WithdrawRightCheckbox = () => {
+  const {
+    props: { isWithdrawable },
+    registerSubmitCallback,
+    unregisterSubmitCallback,
+    hasWaivedWithdrawalRight,
+    setHasWaivedWithdrawalRight,
+  } = useSaleTunnelContext();
+  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 {...messages.waiveCheckboxExplanation} />
+      </Alert>
+      <Checkbox
+        className="waiveCheckbox__input"
+        label={<FormattedMessage {...messages.waiveCheckboxLabel} />}
+        checked={hasWaivedWithdrawalRight}
+        onChange={(e) => setHasWaivedWithdrawalRight(e.target.checked)}
+      />
+    </section>
+  );
+};
+
+export default WithdrawRightCheckbox;

frontend/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();

frontend/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,11 @@ describe('SaleTunnel', () => {
         priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
     );
 
+    /**
+     * Make sure the checkbox to waive withdrawal right is displayed
+     */
+    const $waiveCheckbox = screen.getByLabelText('I waive my right of withdrawal');
+
     /**
      * Subscribe
      */
@@ -282,6 +292,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();
 

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

@@ -175,7 +175,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder call.
@@ -262,7 +262,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder get order with filters
@@ -337,7 +337,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -373,7 +373,7 @@ describe.each([
           overwriteRoutes: true,
         });
 
-      render(<Wrapper product={product} />, {
+      render(<Wrapper product={product} isWithdrawable={true} />, {
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
       });
 
@@ -398,7 +398,7 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -447,10 +447,50 @@ describe.each([
         schedule,
       );
 
-    render(<Wrapper product={product} />, {
+    render(<Wrapper product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
     screen.getByTestId('walkthrough-banner');
   });
+
+  it('should show a checkbox to waive withdrawal right if the product is not withdrawable', async () => {
+    const product = ProductFactory().one();
+    const schedule = PaymentInstallmentFactory().many(2);
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} isWithdrawable={false} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    screen.getByTestId('withdraw-right-checkbox');
+  });
+
+  it('should not show a checkbox to waive withdrawal right if the product is withdrawable', async () => {
+    const product = ProductFactory().one();
+    const schedule = PaymentInstallmentFactory().many(2);
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} isWithdrawable={true} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    expect(screen.queryByTestId('withdraw-right-checkbox')).toBeNull();
+  });
 });

frontend/js/components/SaleTunnel/index.stories.tsx

@@ -12,6 +12,7 @@ export default {
       product: ProductFactory().one(),
       onClose: () => {},
       course: PacedCourseFactory().one(),
+      isWithdrawable: true,
       // enrollment?: Enrollment;
       // product: CredentialProduct | CertificateProduct;
       // orderGroup?: OrderGroup;

frontend/js/components/SaleTunnel/index.tsx

@@ -17,7 +17,7 @@ import { PacedCourse } from 'types';
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
   organizations?: Organization[];
-
+  isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;
   enrollment?: Enrollment;
   orderGroup?: OrderGroup;

frontend/js/components/TeacherDashboardCourseList/index.tsx

@@ -6,7 +6,7 @@ import { CourseGlimpseList, getCourseGlimpseListProps } from 'components/CourseG
 import { Spinner } from 'components/Spinner';
 import context from 'utils/context';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { CourseListItem, CourseProductRelation } from 'types/Joanie';
+import { CourseListItem, CourseProductRelationLight } from 'types/Joanie';
 import Banner from 'components/Banner';
 
 const messages = defineMessages({
@@ -31,7 +31,7 @@ interface TeacherDashboardCourseListProps {
   titleTranslated?: string;
   organizationId?: string;
   loadMore: () => void;
-  courseAndProductList?: (CourseListItem | CourseProductRelation)[];
+  courseAndProductList?: (CourseListItem | CourseProductRelationLight)[];
   isLoadingMore?: boolean;
   hasMore?: boolean;
   isNewSearchLoading?: boolean;

frontend/js/hooks/useCourseProductUnion/index.ts

@@ -7,6 +7,7 @@ import {
   CourseQueryFilters,
   CourseProductRelationQueryFilters,
   ProductType,
+  CourseProductRelationLight,
 } from 'types/Joanie';
 import useUnionResource, { ResourceUnionPaginationProps } from 'hooks/useUnionResource';
 
@@ -40,7 +41,7 @@ export const useCourseProductUnion = ({
   const api = useJoanieApi();
   return useUnionResource<
     CourseListItem,
-    CourseProductRelation,
+    CourseProductRelation | CourseProductRelationLight,
     CourseQueryFilters,
     CourseProductRelationQueryFilters
   >({

frontend/js/hooks/useTeacherCoursesSearch/index.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
-import { CourseListItem, CourseProductRelation, ProductType } from 'types/Joanie';
+import { CourseListItem, CourseProductRelationLight, ProductType } from 'types/Joanie';
 import { Maybe, Nullable } from 'types/utils';
 
 const useTeacherCoursesSearch = () => {
@@ -9,7 +9,7 @@ const useTeacherCoursesSearch = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [count, setCount] = useState<Maybe<number>>(0);
   const [courseAndProductList, setCourseAndProductList] = useState<
-    (CourseListItem | CourseProductRelation)[]
+    (CourseListItem | CourseProductRelationLight)[]
   >([]);
   const [isNewSearchLoading, setIsNewSearchLoading] = useState(false);
   const query = searchParams.get('query') || undefined;

frontend/js/types/Joanie.ts

@@ -174,17 +174,21 @@ export interface DefinitionResourcesProduct {
   contract_definition_id: Nullable<ContractDefinition['id']>;
 }
 
-export interface CourseProductRelation {
+export interface CourseProductRelationLight {
   id: string;
   course: CourseLight;
   organizations: Organization[];
   product: Product;
   created_on: string;
+}
+
+export interface CourseProductRelation extends CourseProductRelationLight {
   order_groups: OrderGroup[];
+  is_withdrawable: boolean;
 }
 export function isCourseProductRelation(
-  entity: CourseListItem | CourseProductRelation | RichieCourse,
-): entity is CourseProductRelation {
+  entity: CourseListItem | CourseProductRelationLight | RichieCourse,
+): entity is CourseProductRelationLight {
   return 'course' in entity && 'product' in entity;
 }
 
@@ -468,6 +472,7 @@ interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
   order_group_id?: OrderGroup['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
+  has_waived_withdrawal_right: boolean;
 }
 
 interface OrderCertificateCreationPayload extends AbstractOrderProductCreationPayload {
@@ -697,7 +702,7 @@ export interface API {
       filters?: Filters,
     ): Filters extends { id: string }
       ? Promise<Nullable<CourseProductRelation>>
-      : Promise<PaginatedResponse<CourseProductRelation>>;
+      : Promise<PaginatedResponse<CourseProductRelationLight>>;
   };
   contractDefinitions: {
     previewTemplate(id: string): Promise<File>;

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

@@ -337,6 +337,7 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
     order_groups: [],
+    is_withdrawable: true,
   };
 });
 
@@ -490,6 +491,8 @@ export const SaleTunnelContextFactory = factory(
     billingAddress: undefined,
     setBillingAddress: noop,
     setCreditCard: noop,
+    setHasWaivedWithdrawalRight: noop,
+    hasWaivedWithdrawalRight: false,
     step: SaleTunnelStep.IDLE,
     registerSubmitCallback: noop,
     unregisterSubmitCallback: noop,

frontend/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.tsx

@@ -33,13 +33,14 @@ export const DashboardItemEnrollment = ({ enrollment }: DashboardItemCourseRunPr
         </div>
       </div>,
     ];
-    enrollment.product_relations.forEach(({ product }) => {
+    enrollment.product_relations.forEach(({ product, is_withdrawable }) => {
       if (isCertificateProduct(product)) {
         partialFooterList.push(
           <ProductCertificateFooter
             key={[enrollment.id, product.id].join('_')}
             product={product}
             enrollment={enrollment}
+            isWithdrawable={is_withdrawable}
           />,
         );
       }