richie-education 3.3.2-dev6 → 3.4.0

package/i18n/locales/vi-VN.json

@@ -1911,6 +1911,14 @@
     "description": "Validate button for the credit card modal",
     "message": "Validate"
   },
+  "components.SaleTunnel.Information.cpf.buttonLabel": {
+    "description": "Label for the button redirecting to Mon Compte Formation",
+    "message": "Go to Mon Compte Formation"
+  },
+  "components.SaleTunnel.Information.cpf.description": {
+    "description": "Explanatory text for the CPF payment option",
+    "message": "Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation."
+  },
   "components.SaleTunnel.Information.description": {
     "description": "Description of the information section",
     "message": "This information will be used for billing"
@@ -1951,6 +1959,18 @@
     "description": "Message displayed representing the payment schedule when the order is free.",
     "message": "No payment required. This order is fully covered."
   },
+  "components.SaleTunnel.Information.paymentMode.classic": {
+    "description": "Label for the classic card payment option",
+    "message": "Credit card payment"
+  },
+  "components.SaleTunnel.Information.paymentMode.cpf": {
+    "description": "Label for the CPF (Mon Compte Formation) payment option",
+    "message": "My Training Account (CPF)"
+  },
+  "components.SaleTunnel.Information.paymentMode.title": {
+    "description": "Title for the payment mode selection section",
+    "message": "Payment method"
+  },
   "components.SaleTunnel.Information.paymentSchedule": {
     "description": "Title for the payment schedule section",
     "message": "Payment schedule"

package/jest.config.js

@@ -17,6 +17,10 @@ module.exports = {
   transformIgnorePatterns: [
     'node_modules/(?!(' +
       'react-intl' +
+      '|@formatjs' +
+      '|intl-messageformat' +
+      '|@tanstack' +
+      '|uuid' +
       '|lodash-es' +
       '|@hookform/resolvers' +
       '|query-string' +
@@ -25,6 +29,7 @@ module.exports = {
       '|filter-obj' +
       '|@openfun/cunningham-react' +
       '|keycloak-js' +
+      '|@faker-js/faker' +
       ')/)',
   ],
   globals: {

package/js/components/AddressesManagement/AddressForm/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import AddressForm from '.';

package/js/components/AddressesManagement/AddressForm/index.tsx

@@ -1,6 +1,6 @@
 import { yupResolver } from '@hookform/resolvers/yup';
 import { Fragment, useEffect } from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Button, Checkbox } from '@openfun/cunningham-react';
 import { getLocalizedCunninghamErrorProp } from 'components/Form/utils';
@@ -39,7 +39,7 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
     defaultValues: address || defaultValues,
     mode: 'onBlur',
     reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<AddressFormValues>,
   });
   const { register, handleSubmit, reset, formState } = form;
 
@@ -140,7 +140,8 @@ const AddressForm = ({ handleReset, onSubmit, address }: Props) => {
           {address ? (
             <Fragment>
               <Button
-                color="tertiary"
+                color="brand"
+                variant="tertiary"
                 onClick={handleCancel}
                 title={intl.formatMessage(messages.cancelTitleButton)}
               >

package/js/components/AddressesManagement/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { RichieContextFactory } from 'utils/test/factories/richie';
 import AddressesManagement from '.';

package/js/components/AddressesManagement/index.tsx

@@ -1,4 +1,4 @@
-import { Children, useEffect, useState, RefAttributes } from 'react';
+import { Children, useEffect, useState, Ref } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import AddressForm, { type AddressFormValues } from 'components/AddressesManagement/AddressForm';
@@ -105,9 +105,10 @@ export const messages = defineMessages({
   },
 });
 
-interface AddressesManagementProps extends RefAttributes<HTMLDivElement> {
+interface AddressesManagementProps {
   handleClose: () => void;
   selectAddress: (address: Joanie.Address) => void;
+  ref?: Ref<HTMLDivElement>;
 }
 
 const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManagementProps) => {
@@ -191,7 +192,8 @@ const AddressesManagement = ({ handleClose, selectAddress, ref }: AddressesManag
     <div className="AddressesManagement" ref={ref}>
       <Button
         className="AddressesManagement__closeButton"
-        color="tertiary"
+        color="brand"
+        variant="tertiary"
         size="small"
         onClick={handleClose}
       >

package/js/components/Badge/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import Badge from '.';
 
 export default {

package/js/components/Badge/index.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { PropsWithChildren } from 'react/ts5.0';
+import { PropsWithChildren } from 'react';
 
 type BadgeProps = PropsWithChildren<{
   color?: 'primary' | 'secondary' | 'tertiary';

package/js/components/Banner/index.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import Banner, { BannerType } from './index';
 
 export default {

package/js/components/CourseGlimpse/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { CourseLightFactory, RichieContextFactory } from 'utils/test/factories/richie';
 import { CourseGlimpse, getCourseGlimpseProps } from 'components/CourseGlimpse';
 import { CourseCertificateOffer, CourseOffer } from 'types/Course';

package/js/components/CourseGlimpseList/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { RichieContextFactory, CourseLightFactory } from 'utils/test/factories/richie';
 import { CourseGlimpseList, getCourseGlimpseListProps } from '.';
 

package/js/components/CreditCardSelector/_styles.scss

@@ -15,8 +15,8 @@
         text-align: left;
         font-size: rem-calc(12px);
         color: r-theme-val(credit-card-selector, title-color);
-        font-weight: var(--c--theme--font--weights--bold);
-        font-family: var(--c--theme--font--families--accent);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-family: var(--c--globals--font--families--accent);
       }
 
       &__meta {

package/js/components/CreditCardSelector/index.tsx

@@ -111,7 +111,8 @@ export const CreditCardSelector = ({
             {allowEdit && creditCards?.length > 0 && (
               <Button
                 icon={<span className="material-icons">edit</span>}
-                color="tertiary-text"
+                color="brand"
+                variant="tertiary"
                 size="medium"
                 onClick={modal.open}
                 aria-label={intl.formatMessage(messages.editCreditCardAriaLabel)}
@@ -122,7 +123,8 @@ export const CreditCardSelector = ({
             <Button
               onClick={() => setCreditCard(undefined)}
               size="small"
-              color="secondary"
+              color="brand"
+              variant="secondary"
               className="mt-t"
               fullWidth={isMobile}
             >
@@ -217,7 +219,13 @@ const CreditCardSelectorModal = ({
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.modalTitle)}
       actions={
-        <Button color="primary" size="small" fullWidth={true} onClick={() => onChange(selected)}>
+        <Button
+          color="brand"
+          variant="primary"
+          size="small"
+          fullWidth={true}
+          onClick={() => onChange(selected)}
+        >
           <FormattedMessage {...messages.modalTitle} />
         </Button>
       }

package/js/components/DownloadCertificateButton/index.tsx

@@ -38,7 +38,8 @@ const DownloadCertificateButton = ({
     <Button
       className={className}
       size="small"
-      color="secondary"
+      color="brand"
+      variant="secondary"
       disabled={loading}
       onClick={onDownloadClick}
     >

package/js/components/DownloadContractButton/index.tsx

@@ -39,7 +39,13 @@ const DownloadContractButton = ({ contract, className }: DownloadContractButtonP
   };
 
   return (
-    <Button size="small" className={className} color="secondary" onClick={downloadContract}>
+    <Button
+      size="small"
+      className={className}
+      color="brand"
+      variant="secondary"
+      onClick={downloadContract}
+    >
       <FormattedMessage {...messages.contractDownloadActionLabel} />
     </Button>
   );

package/js/components/Form/Form/index.tsx

@@ -1,8 +1,10 @@
 import c from 'classnames';
 import { PropsWithChildren } from 'react';
 
-interface FormProps
-  extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {}
+interface FormProps extends React.DetailedHTMLProps<
+  React.FormHTMLAttributes<HTMLFormElement>,
+  HTMLFormElement
+> {}
 
 const Form = ({ children, onSubmit, className, name, noValidate = true }: FormProps) => {
   return (

package/js/components/Icon/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { PropsWithChildren, useState, useRef, CSSProperties } from 'react';
 import { HttpStatusCode } from 'utils/errors/HttpError';
 import { Icon, IconTypeEnum } from './index';
@@ -69,6 +69,7 @@ const IconContainer = ({ name, enumKey }: IconContainerProps) => {
   };
 
   const clipboardCopy = () => {
+    // eslint-disable-next-line compat/compat
     navigator.clipboard.writeText(`${ENUM_NAME}.${enumKey}`);
     setShowTooltip(true);
     if (timeoutRef.current) clearTimeout(timeoutRef.current);

package/js/components/Modal/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { useState } from 'react';
 import { Modal } from './index';
 

package/js/components/Modal/index.tsx

@@ -78,7 +78,8 @@ export const Modal = ({
             className="modal__closeButton"
             onClick={(e) => props.onRequestClose?.(e)}
             title={intl.formatMessage(messages.closeDialog)}
-            color="tertiary"
+            color="brand"
+            variant="tertiary"
             size="small"
           >
             <Icon name={IconTypeEnum.ROUND_CLOSE} />

package/js/components/OpenEdxFullNameForm/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import OpenEdxFullNameForm from '.';
 

package/js/components/OpenEdxFullNameForm/index.tsx

@@ -1,6 +1,6 @@
 import { ButtonElement, Input, Alert, VariantType } from '@openfun/cunningham-react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useEffect, useMemo, useRef } from 'react';
@@ -78,7 +78,7 @@ const OpenEdxFullNameForm = () => {
     defaultValues,
     mode: 'onBlur',
     reValidateMode: 'onChange',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<OpenEdxFullNameFormValues>,
   });
 
   const { getValues, register, handleSubmit, reset, formState } = form;

package/js/components/PaymentScheduleGrid/_styles.scss

@@ -18,8 +18,8 @@
   height: 24px;
   padding: 0 12px;
   border-radius: 24px;
-  font-family: var(--c--theme--font--families--accent);
-  font-weight: var(--c--theme--font--weight--semibold);
+  font-family: var(--c--globals--font--families--accent);
+  font-weight: var(--c--globals--font--weights--medium);
   font-size: rem-calc(12px);
 
   &--canceled,

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { ProductFactory } from 'utils/test/factories/joanie';
 import PurchaseButton from '.';
 

package/js/components/RegisteredAddress/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { AddressFactory } from 'utils/test/factories/joanie';
 import RegisteredAddress from '.';

package/js/components/RegisteredAddress/index.tsx

@@ -91,7 +91,8 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
         </Button>
         <Button
           aria-label={intl.formatMessage(messages.editButtonLabel, { title: address.title })}
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           onClick={() => edit(address)}
         >
@@ -101,7 +102,8 @@ const RegisteredAddress = ({ promote, select, edit, remove, address }: Props) =>
           aria-label={intl.formatMessage(messages.deleteButtonLabel, {
             title: address.title,
           })}
-          color="secondary"
+          color="brand"
+          variant="secondary"
           size="small"
           disabled={address.is_main}
           onClick={() => remove(address)}

package/js/components/SaleTunnel/AddressSelector/CreateAddressFormModal.tsx

@@ -52,7 +52,7 @@ export const CreateAddressFormModal = (props: AddressFormModalProps) => {
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.title)}
       actions={
-        <Button color="primary" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button color="brand" variant="primary" size="small" onClick={handleSubmit(onSubmit)}>
           <FormattedMessage {...messages.submit} />
         </Button>
       }

package/js/components/SaleTunnel/AddressSelector/EditAddressFormModal.tsx

@@ -49,7 +49,7 @@ export const EditAddressFormModal = ({
       size={ModalSize.MEDIUM}
       title={intl.formatMessage(messages.title)}
       actions={
-        <Button color="primary" size="small" onClick={handleSubmit(onSubmit)}>
+        <Button color="brand" variant="primary" size="small" onClick={handleSubmit(onSubmit)}>
           <FormattedMessage {...messages.save} />
         </Button>
       }

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

@@ -75,7 +75,8 @@ export const AddressSelector = () => {
         <Button
           size="small"
           icon={<span className="material-icons">edit</span>}
-          color="tertiary"
+          color="brand"
+          variant="tertiary"
           onClick={editFormModal.open}
           fullWidth={isMobile}
         >
@@ -85,7 +86,8 @@ export const AddressSelector = () => {
         <Button
           size="small"
           icon={<span className="material-icons">add</span>}
-          color="primary"
+          color="brand"
+          variant="primary"
           onClick={createFormModal.open}
           fullWidth={isMobile}
         >

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, Resolver, useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import * as Yup from 'yup';
 import { Step, StepLabel, Stepper } from '@mui/material';
@@ -197,7 +197,7 @@ const BatchOrderForm = () => {
   const form = useForm<BatchOrder>({
     defaultValues: batchOrder || defaultValues,
     mode: 'onBlur',
-    resolver: yupResolver(validationSchema),
+    resolver: yupResolver(validationSchema) as Resolver<BatchOrder>,
   });
   const { watch } = form;
   const values = watch();
@@ -268,7 +268,8 @@ const BatchOrderForm = () => {
             }
           }}
           hidden={activeStep === 0}
-          color="tertiary"
+          color="brand"
+          variant="tertiary"
         >
           <FormattedMessage {...messages.previousButton} />
         </Button>

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

@@ -143,7 +143,7 @@ const messages = defineMessages({
     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.',
+      'Purchase your training course by using your Personal Training Account (CPF) on Mon Compte Formation.',
   },
   cpfButtonLabel: {
     id: 'components.SaleTunnel.Information.cpf.buttonLabel',
@@ -236,7 +236,12 @@ export const SaleTunnelInformationSingular = () => {
         </div>
       )}
       {paymentMode === PaymentMode.CPF ? (
-        <CpfPayment deepLink={deepLink!} />
+        <CpfPayment
+          deepLink={deepLink!}
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
       ) : (
         <>
           {needsPayment && (
@@ -443,7 +448,13 @@ const Voucher = ({
             label={intl.formatMessage(messages.voucherTitle)}
             disabled={!!voucherCode}
           />
-          <Button size="small" color="primary" onClick={submitVoucher} disabled={!!voucherCode}>
+          <Button
+            size="small"
+            color="brand"
+            variant="primary"
+            onClick={submitVoucher}
+            disabled={!!voucherCode}
+          >
             <FormattedMessage {...messages.voucherValidate} />
           </Button>
         </div>
@@ -493,14 +504,24 @@ const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
   );
 };
 
-const CpfPayment = ({ deepLink }: { deepLink: string }) => {
+const CpfPayment = ({
+  deepLink,
+  discount,
+  voucherError,
+  setVoucherError,
+}: {
+  deepLink: string;
+  discount?: string;
+  voucherError: HttpError | null;
+  setVoucherError: (value: HttpError | null) => void;
+}) => {
   return (
     <div className="sale-tunnel__cpf">
       <p className="description mb-s">
         <FormattedMessage {...messages.cpfDescription} />
       </p>
       <Button
-        color="primary"
+        color="brand"
         fullWidth={true}
         href={deepLink}
         target="_blank"
@@ -508,6 +529,7 @@ const CpfPayment = ({ deepLink }: { deepLink: string }) => {
       >
         <FormattedMessage {...messages.cpfButtonLabel} />
       </Button>
+      <Voucher discount={discount} voucherError={voucherError} setVoucherError={setVoucherError} />
     </div>
   );
 };

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

@@ -110,9 +110,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     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);
@@ -138,12 +135,17 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       return;
     }
 
-    if (!billingAddress && needsPayment) {
+    if (!billingAddress && needsPayment && paymentMode !== PaymentMode.CPF) {
       handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
       return;
     }
 
-    if (!saleTunnelProps.isWithdrawable && !hasWaivedWithdrawalRight && needsPayment) {
+    if (
+      !saleTunnelProps.isWithdrawable &&
+      !hasWaivedWithdrawalRight &&
+      needsPayment &&
+      paymentMode !== PaymentMode.CPF
+    ) {
       handleError(SubscriptionErrorMessageId.ERROR_WITHDRAWAL_RIGHT);
       return;
     }

package/js/components/SaleTunnel/_styles.scss

@@ -32,12 +32,13 @@
     &__right {
       flex: 1;
       overflow: hidden;
+      position: relative;
     }
 
     &__column {
       display: flex;
       flex-direction: column;
-      gap: var(--c--theme--spacings--b);
+      gap: var(--c--globals--spacings--b);
     }
   }
 
@@ -135,7 +136,7 @@
       margin-top: 1rem;
       display: flex;
       justify-content: space-between;
-      font-size: var(--c--theme--font--sizes--l);
+      font-size: var(--c--globals--font--sizes--md);
     }
   }
 
@@ -159,8 +160,8 @@
       gap: 0.5rem;
 
       .title {
-        font-weight: var(--c--theme--font--weights--bold);
-        font-size: var(--c--theme--font--sizes--l);
+        font-weight: var(--c--globals--font--weights--bold);
+        font-size: var(--c--globals--font--sizes--md);
         margin: 0 0 0.5rem;
       }
 
@@ -209,17 +210,17 @@
 }
 
 .block-title {
-  font-size: var(--c--theme--font--sizes--l);
+  font-size: var(--c--globals--font--sizes--md);
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--extrabold);
+  font-weight: var(--c--globals--font--weights--extrabold);
   text-align: left;
-  font-family: var(--c--theme--font--families--accent);
+  font-family: var(--c--globals--font--families--accent);
 }
 
 .sub-block-title {
   font-size: 12px;
   color: r-theme-val(sale-tunnel, title-color);
-  font-weight: var(--c--theme--font--weights--bold);
+  font-weight: var(--c--globals--font--weights--bold);
   text-align: left;
 }
 

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

@@ -166,7 +166,9 @@ describe('SaleTunnel / Credential', () => {
 
     // - CPF description and redirect button should be visible.
     expect(
-      screen.getByText(/pay for your training using your personal training account/i),
+      screen.getByText(
+        /purchase your training course by using your Personal Training Account \(CPF\) on Mon Compte Formation/i,
+      ),
     ).toBeInTheDocument();
     const cpfButton = screen.getByRole('link', { name: /go to mon compte formation/i });
 
@@ -222,4 +224,51 @@ describe('SaleTunnel / Credential', () => {
     // - Classic billing information section should be displayed.
     expect(screen.getByText(/this information will be used for billing/i)).toBeInTheDocument();
   });
+
+  it('should display voucher input and subscribe button in CPF mode', 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,
+      });
+
+    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 });
+
+    // Switch to CPF mode
+    await user.click(screen.getByRole('radio', { name: /my training account \(cpf\)/i }));
+
+    // - Voucher input should be visible in CPF mode.
+    expect(screen.getByLabelText('Voucher code')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Validate' })).toBeInTheDocument();
+
+    // - Subscribe button should be visible in CPF mode.
+    expect(screen.getByRole('button', { name: 'Subscribe' })).toBeInTheDocument();
+  });
 });

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

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react-webpack5';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
 import {
   CertificateProductFactory,