richie-education 3.2.1-dev1 → 3.2.1-dev11

package/js/api/joanie.ts

@@ -16,7 +16,6 @@ import { JOANIE_API_VERSION } from 'settings';
 import { ResourcesQuery } from 'hooks/useResources';
 import { ObjectHelper } from 'utils/ObjectHelper';
 import { Maybe, Nullable } from 'types/utils';
-import { PaymentSchedule } from 'types/Joanie';
 import { checkStatus, getFileFromResponse } from './utils';
 
 /*
@@ -145,8 +144,8 @@ export const getRoutes = () => {
       },
       products: {
         get: `${baseUrl}/courses/:course_id/products/:id/`,
-        paymentSchedule: {
-          get: `${baseUrl}/courses/:course_id/products/:id/payment-schedule/`,
+        paymentPlan: {
+          get: `${baseUrl}/courses/:course_id/products/:id/payment-plan/`,
         },
       },
       orders: {
@@ -430,10 +429,10 @@ const API = (): Joanie.API => {
 
           return fetchWithJWT(buildApiUrl(ROUTES.courses.products.get, filters)).then(checkStatus);
         },
-        paymentSchedule: {
+        paymentPlan: {
           get: async (
             filters?: Joanie.CourseProductQueryFilters,
-          ): Promise<Nullable<PaymentSchedule>> => {
+          ): Promise<Nullable<Joanie.PaymentPlan>> => {
             if (!filters) {
               throw new Error(
                 'A course code and a product id are required to fetch a course product',
@@ -444,9 +443,9 @@ const API = (): Joanie.API => {
               throw new Error('A product id is required to fetch a course product');
             }
 
-            return fetchWithJWT(
-              buildApiUrl(ROUTES.courses.products.paymentSchedule.get, filters),
-            ).then(checkStatus);
+            return fetchWithJWT(buildApiUrl(ROUTES.courses.products.paymentPlan.get, filters)).then(
+              checkStatus,
+            );
           },
         },
       },

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

@@ -113,7 +113,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
 
@@ -157,7 +157,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
     render(
@@ -199,7 +199,7 @@ describe('PurchaseButton', () => {
     fetchMock
       .get(url, {})
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${courseCode}/products/${product.id}/payment-plan/`,
         [],
       );
     delete product.remaining_order_count;

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

@@ -49,6 +49,7 @@ describe('AddressSelector', () => {
 
     const Wrapper = () => {
       const [billingAddress, setBillingAddress] = useState<Address>();
+      const [voucherCode, setVoucherCode] = useState<string>();
       const context: SaleTunnelContextType = useMemo(
         () => ({
           webAnalyticsEventKey: 'eventKey',
@@ -65,8 +66,9 @@ describe('AddressSelector', () => {
           nextStep: jest.fn(),
           hasWaivedWithdrawalRight: false,
           setHasWaivedWithdrawalRight: jest.fn(),
+          setVoucherCode,
         }),
-        [billingAddress],
+        [billingAddress, voucherCode],
       );
       contextRef.current = context;
 

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -51,6 +51,8 @@ export interface SaleTunnelContextType {
   unregisterSubmitCallback: (key: string) => void;
   runSubmitCallbacks: () => Promise<void>;
   nextStep: () => void;
+  voucherCode?: string;
+  setVoucherCode: (code?: string) => void;
 }
 
 export const SaleTunnelContext = createContext<SaleTunnelContextType>({} as any);
@@ -93,6 +95,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
   const [submitCallbacks, setSubmitCallbacks] = useState<Map<string, () => Promise<void>>>(
     new Map(),
   );
+  const [voucherCode, setVoucherCode] = useState<string>();
 
   const nextStep = useCallback(() => {
     if (order)
@@ -102,6 +105,8 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
             setStep(SaleTunnelStep.SIGN);
           } else if (order.state === OrderState.TO_SAVE_PAYMENT_METHOD) {
             setStep(SaleTunnelStep.SAVE_PAYMENT);
+          } else if (order.state === OrderState.COMPLETED) {
+            setStep(SaleTunnelStep.SUCCESS);
           }
           break;
         case SaleTunnelStep.SIGN:
@@ -147,8 +152,19 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       runSubmitCallbacks: async () => {
         await Promise.all(Array.from(submitCallbacks.values()).map((cb) => cb()));
       },
+      voucherCode,
+      setVoucherCode,
     }),
-    [props, order, billingAddress, creditCard, step, submitCallbacks, hasWaivedWithdrawalRight],
+    [
+      props,
+      order,
+      billingAddress,
+      creditCard,
+      step,
+      submitCallbacks,
+      hasWaivedWithdrawalRight,
+      voucherCode,
+    ],
   );
 
   return (

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

@@ -1,14 +1,16 @@
-import { defineMessages, FormattedMessage, FormattedNumber } from 'react-intl';
+import { ChangeEvent, useEffect, useState } from 'react';
+import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
+import { Alert, Button, Input, VariantType } from '@openfun/cunningham-react';
 import { AddressSelector } from 'components/SaleTunnel/AddressSelector';
 import { PaymentScheduleGrid } from 'components/PaymentScheduleGrid';
 import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
 import OpenEdxFullNameForm from 'components/OpenEdxFullNameForm';
 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';
-import { ProductType } from 'types/Joanie';
+import { PaymentSchedule, ProductType } from 'types/Joanie';
+import { usePaymentPlan } from 'hooks/usePaymentPlan';
+import { HttpError } from 'utils/errors/HttpError';
 
 const messages = defineMessages({
   title: {
@@ -52,10 +54,68 @@ const messages = defineMessages({
     defaultMessage:
       'This email will be used to send you confirmation mails, it is the one you created your account with.',
   },
+  voucherTitle: {
+    id: 'components.SaleTunnel.Information.voucher.title',
+    description: 'Title for the voucher',
+    defaultMessage: 'Voucher code',
+  },
+  voucherInfo: {
+    id: 'components.SaleTunnel.Information.voucher.info',
+    description: 'Info for the voucher',
+    defaultMessage: 'If you have a voucher code, please enter it in the field below.',
+  },
+  voucherValidate: {
+    id: 'components.SaleTunnel.Information.voucher.validate',
+    description: 'Validate text for the voucher',
+    defaultMessage: 'Validate',
+  },
+  voucherDelete: {
+    id: 'components.SaleTunnel.Information.voucher.delete',
+    description: 'Delete text for the voucher',
+    defaultMessage: 'Delete this voucher',
+  },
+  voucherErrorInvalid: {
+    id: 'components.SaleTunnel.Information.voucher.errorInvalid',
+    description: 'Error when voucher is invalid',
+    defaultMessage: 'The submitted voucher code is not valid.',
+  },
+  voucherErrorTooManyRequests: {
+    id: 'components.SaleTunnel.Information.voucher.errorTooManyRequests',
+    description: 'Error when user has tried too many vouchers',
+    defaultMessage: 'Too many attempts. Please try again later.',
+  },
+  discount: {
+    id: 'components.SaleTunnel.Information.voucher.discount',
+    description: 'Discount description',
+    defaultMessage: 'Discount applied',
+  },
 });
 
 export const SaleTunnelInformation = () => {
-  const { product } = useSaleTunnelContext();
+  const { props, product, voucherCode, setVoucherCode } = useSaleTunnelContext();
+  const [voucherError, setVoucherError] = useState<HttpError | null>(null);
+  const query = usePaymentPlan({
+    course_code: props.course?.code ?? props.enrollment!.course_run.course.code,
+    product_id: props.product.id,
+    ...(voucherCode ? { voucher_code: voucherCode } : {}),
+  });
+  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 showPaymentSchedule =
+    product.type === ProductType.CREDENTIAL &&
+    schedule &&
+    (discountedPrice != null ? discountedPrice > 0 : price != null && price > 0);
+
+  useEffect(() => {
+    if (query.error && voucherCode) {
+      setVoucherCode('');
+      setVoucherError(query.error);
+    }
+  }, [query.error, voucherCode, setVoucherCode]);
+
   return (
     <div className="sale-tunnel__main__column sale-tunnel__information">
       <div>
@@ -72,13 +132,19 @@ export const SaleTunnelInformation = () => {
         </div>
       </div>
       <div>
-        {product.type === ProductType.CREDENTIAL && <PaymentScheduleBlock />}
-        <Total />
+        {showPaymentSchedule && <PaymentScheduleBlock schedule={schedule} />}
+        <Voucher
+          discount={discount}
+          voucherError={voucherError}
+          setVoucherError={setVoucherError}
+        />
+        <Total price={price} discountedPrice={discountedPrice} />
         <WithdrawRightCheckbox />
       </div>
     </div>
   );
 };
+
 const Email = () => {
   const { user } = useSession();
   const { data: openEdxProfileData } = useOpenEdxProfile({
@@ -100,44 +166,126 @@ const Email = () => {
   );
 };
 
-const Total = () => {
-  const { product, offering, enrollment } = useSaleTunnelContext();
-  const totalPrice =
-    enrollment?.offerings?.[0]?.rules?.discounted_price ??
-    offering?.rules?.discounted_price ??
-    product.price;
+const Total = ({ price, discountedPrice }: { price?: number; discountedPrice?: number }) => {
+  const { product } = useSaleTunnelContext();
+  const totalPrice = price || product.price;
   return (
     <div className="sale-tunnel__total">
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
         <div className="block-title">
           <FormattedMessage {...messages.totalLabel} />
         </div>
+
         <div className="block-title">
-          <FormattedNumber value={totalPrice} style="currency" currency={product.price_currency} />
+          {discountedPrice !== undefined ? (
+            <>
+              <span className="price--striked">
+                <FormattedNumber
+                  value={totalPrice}
+                  style="currency"
+                  currency={product.price_currency}
+                />
+              </span>
+              <FormattedNumber
+                value={discountedPrice}
+                style="currency"
+                currency={product.price_currency}
+              />
+            </>
+          ) : (
+            <FormattedNumber
+              value={totalPrice}
+              style="currency"
+              currency={product.price_currency}
+            />
+          )}
         </div>
       </div>
     </div>
   );
 };
 
-const PaymentScheduleBlock = () => {
-  const { props } = useSaleTunnelContext();
-  const query = usePaymentSchedule({
-    course_code: props.course?.code || props.enrollment!.course_run.course.code,
-    product_id: props.product.id,
-  });
+const Voucher = ({
+  discount,
+  voucherError,
+  setVoucherError,
+}: {
+  discount?: string;
+  voucherError: HttpError | null;
+  setVoucherError: (value: HttpError | null) => void;
+}) => {
+  const intl = useIntl();
+  const { voucherCode, setVoucherCode } = useSaleTunnelContext();
+  const [voucher, setVoucher] = useState('');
+  const handleVoucher = (e: ChangeEvent<HTMLInputElement>) => setVoucher(e.target.value);
+  const submitVoucher = () => {
+    setVoucherError(null);
+    setVoucherCode(voucher);
+    setVoucher('');
+  };
 
-  if (!query.data || query.isLoading) {
-    return <Spinner size="large" />;
-  }
+  return (
+    <div className="sale-tunnel__voucher">
+      <div className="description">
+        <h4 className="block-title mb-t">
+          <FormattedMessage {...messages.voucherTitle} />
+        </h4>
+        <span className="mb-t">
+          <FormattedMessage {...messages.voucherInfo} />
+        </span>
+      </div>
+      <div className="form">
+        <Input
+          className="form-field mt-s"
+          value={voucher}
+          onChange={handleVoucher}
+          label={intl.formatMessage(messages.voucherTitle)}
+          disabled={!!voucherCode}
+        />
+        <Button size="small" color="primary" onClick={submitVoucher} disabled={!!voucherCode}>
+          <FormattedMessage {...messages.voucherValidate} />
+        </Button>
+      </div>
+      {voucherCode && (
+        <div className="voucher-tag">
+          <span>{voucherCode}</span>
+          <button
+            onClick={() => setVoucherCode('')}
+            title={intl.formatMessage(messages.voucherDelete)}
+          >
+            <span className="material-icons">close</span>
+          </button>
+        </div>
+      )}
+      {discount && (
+        <div className="voucher-discount">
+          <span>
+            <FormattedMessage {...messages.discount} />
+          </span>
+          <span>{discount}</span>
+        </div>
+      )}
+      {voucherError && (
+        <Alert type={VariantType.ERROR} className="mt-s">
+          {voucherError.code === 429 ? (
+            <FormattedMessage {...messages.voucherErrorTooManyRequests} />
+          ) : (
+            <FormattedMessage {...messages.voucherErrorInvalid} />
+          )}
+        </Alert>
+      )}
+    </div>
+  );
+};
 
+const PaymentScheduleBlock = ({ schedule }: { schedule: PaymentSchedule }) => {
   return (
     <div className="payment-schedule">
       <h4 className="block-title mb-t">
         <FormattedMessage {...messages.paymentSchedule} />
       </h4>
       <div className="mt-t">
-        <PaymentScheduleGrid schedule={query.data} />
+        <PaymentScheduleGrid schedule={schedule} />
       </div>
     </div>
   );

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

@@ -18,7 +18,7 @@ const messages = defineMessages({
   walkthroughToSignAndSavePayment: {
     id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSignAndSavePayment',
     defaultMessage:
-      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method.',
+      'To enroll in the training, you will first be invited to sign the training agreement and then to define a payment method if required.',
     description:
       'Message explaining the subscription process with a training agreement to sign and a payment method to set.',
   },
@@ -72,7 +72,7 @@ interface Props {
   buildOrderPayload: (
     payload: Pick<
       OrderCreationPayload,
-      'product_id' | 'billing_address' | 'has_waived_withdrawal_right'
+      'product_id' | 'billing_address' | 'has_waived_withdrawal_right' | 'voucher_code'
     >,
   ) => OrderCreationPayload;
 }
@@ -87,6 +87,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     nextStep,
     runSubmitCallbacks,
     props: saleTunnelProps,
+    voucherCode,
   } = useSaleTunnelContext();
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
@@ -125,6 +126,7 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
       product_id: product.id,
       billing_address: billingAddress!,
       has_waived_withdrawal_right: hasWaivedWithdrawalRight,
+      voucher_code: voucherCode,
     });
 
     orderMethods.create(payload, {

package/js/components/SaleTunnel/_styles.scss

@@ -82,6 +82,54 @@
       font-size: 0.75rem;
     }
   }
+  .price--striked {
+    text-decoration: line-through;
+    opacity: 0.5;
+    margin-right: 0.5rem;
+  }
+  .sale-tunnel__voucher {
+    margin-top: 1rem;
+    & > .form {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      margin-top: 0.75rem;
+      & > .mt-s {
+        margin-top: 0;
+      }
+      & > button {
+        margin-left: 0.5rem;
+      }
+    }
+    & > .voucher-tag {
+      margin-top: 0.5rem;
+      border-radius: 0.25rem;
+      padding: 0.5rem;
+      width: fit-content;
+      color: black;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border: none;
+      background-color: lightgray;
+      &:hover {
+        background-color: gray;
+      }
+      & > button {
+        background: none;
+        border: none;
+        display: flex;
+        align-items: center;
+      }
+    }
+    & > .voucher-discount {
+      margin-top: 1rem;
+      display: flex;
+      justify-content: space-between;
+      font-size: var(--c--theme--font--sizes--l);
+    }
+  }
 }
 
 .description {

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

@@ -93,7 +93,7 @@ describe('SaleTunnel / Credential', () => {
     fetchMock
       .get(url, [])
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
         [],
       )
       .post('https://joanie.endpoint/api/v1.0/orders/', order)

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

@@ -19,8 +19,8 @@ import {
   CredentialOrderFactory,
   CreditCardFactory,
   PaymentFactory,
-  PaymentInstallmentFactory,
   ProductFactory,
+  PaymentPlanFactory,
 } from 'utils/test/factories/joanie';
 import { CourseRun, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import { Priority } from 'types';
@@ -70,7 +70,9 @@ describe('SaleTunnel', () => {
     new Intl.NumberFormat('en', {
       currency,
       style: 'currency',
-    }).format(price);
+    })
+      .format(price)
+      .replace(/(\u202F|\u00a0)/g, ' ');
 
   beforeEach(() => {
     richieUser = UserFactory().one();
@@ -104,15 +106,15 @@ describe('SaleTunnel', () => {
       product,
       is_withdrawable: false,
     }).one();
-    const paymentSchedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory().one();
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
       offering,
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
-      paymentSchedule,
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+      paymentPlan,
     );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
@@ -135,7 +137,7 @@ describe('SaleTunnel', () => {
     screen.getByText(
       // the price formatter generates non-breaking spaces and getByText doesn't seem to handle that well, replace it
       // with a regular space. We replace NNBSP (\u202F) and NBSP (\u00a0) with a regular space
-      priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+      priceFormatter(product.price_currency, product.price),
     );
     expect(screen.queryByText('Purchased')).not.toBeInTheDocument();
 
@@ -250,14 +252,12 @@ describe('SaleTunnel', () => {
      * Make sure the payment schedule is displayed.
      */
     screen.getByRole('heading', { name: 'Payment schedule' });
-    paymentSchedule.forEach((installment, index) => {
+    paymentPlan.payment_schedule.forEach((installment, index) => {
       const row = screen.getByTestId(installment.id);
       const cells = getAllByRole(row, 'cell');
       expect(cells).toHaveLength(4);
       expect(cells[0]).toHaveTextContent((index + 1).toString());
-      expect(cells[1]).toHaveTextContent(
-        priceFormatter(installment.currency, installment.amount).replace(/(\u202F|\u00a0)/g, ' '),
-      );
+      expect(cells[1]).toHaveTextContent(priceFormatter(installment.currency, installment.amount));
       expect(cells[2]).toHaveTextContent(
         `Withdrawn on ${dateFormatter.format(new Date(installment.due_date))}`,
       );
@@ -266,8 +266,30 @@ describe('SaleTunnel', () => {
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
+      'Total' + priceFormatter(product.price_currency, paymentPlan.price),
+    );
+
+    /**
+     * Submit voucher and check price
+     */
+    const paymentPlanVoucher = PaymentPlanFactory({
+      discounted_price: 70,
+      discount: '-30%',
+    }).one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
+      paymentPlanVoucher,
+      { overwriteRoutes: true },
+    );
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    screen.getByRole('heading', { name: 'Payment schedule' });
+    await screen.findByTestId('sale-tunnel__total__amount');
+    const $totalAmountVoucher = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmountVoucher).toHaveTextContent(
       'Total' +
-        priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+        priceFormatter(product.price_currency, paymentPlanVoucher.price!) +
+        priceFormatter(product.price_currency, paymentPlanVoucher.discounted_price!),
     );
 
     /**

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

@@ -22,7 +22,7 @@ import {
   CredentialProductFactory,
   CreditCardFactory,
   EnrollmentFactory,
-  PaymentInstallmentFactory,
+  PaymentPlanFactory,
 } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
 import { render } from 'utils/test/render';
@@ -163,15 +163,15 @@ describe.each([
       is_main: true,
     }).one();
     const order = OrderFactory({ state: OrderState.TO_SAVE_PAYMENT_METHOD }).one();
-
+    const paymentPlan = PaymentPlanFactory().one();
     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/`,
-        [],
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       )
       .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, order)
@@ -179,15 +179,13 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder call.
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    if (product.type === ProductType.CREDENTIAL) {
-      nbApiCalls += 1; // product payment-schedule call
-    }
+    nbApiCalls += 1; // product payment-schedule call
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -253,30 +251,28 @@ describe.each([
       is_main: true,
     }).one();
     const deferred = new Deferred();
-
+    const paymentPlan = PaymentPlanFactory().one();
     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/`,
-        [],
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       )
       .post('https://joanie.endpoint/api/v1.0/orders/', deferred.promise)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
     nbApiCalls += 1; // useProductOrder get order with filters
     nbApiCalls += 1; // get user account call.
     nbApiCalls += 1; // get user preferences call.
-    if (product.type === ProductType.CREDENTIAL) {
-      nbApiCalls += 1; // get product payment schedule.
-    }
+    nbApiCalls += 1; // get paymentPlan call.
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
 
     const user = userEvent.setup({ delay: null });
@@ -328,15 +324,15 @@ describe.each([
     }).one();
     const creditCard = CreditCardFactory().one();
     const order = OrderFactory({ state: OrderState.TO_SAVE_PAYMENT_METHOD }).one();
-
+    const paymentPlan = PaymentPlanFactory().one();
     fetchMock
       .get(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
         [order],
       )
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
-        [],
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       )
       .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
         overwriteRoutes: true,
@@ -345,7 +341,7 @@ describe.each([
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -364,15 +360,15 @@ describe.each([
       }).one();
       const creditCard = CreditCardFactory().one();
       const order = OrderFactory({ state }).one();
-
+      const paymentPlan = PaymentPlanFactory().one();
       fetchMock
         .get(
           `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
           [order],
         )
         .get(
-          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
-          [],
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+          paymentPlan,
         )
         .get('https://joanie.endpoint/api/v1.0/credit-cards/', [creditCard], {
           overwriteRoutes: true,
@@ -381,7 +377,7 @@ describe.each([
           overwriteRoutes: true,
         });
 
-      render(<Wrapper product={product} isWithdrawable={true} />, {
+      render(<Wrapper product={product} isWithdrawable={true} paymentPlan={paymentPlan} />, {
         queryOptions: { client: createTestQueryClient({ user: richieUser }) },
       });
 
@@ -395,18 +391,19 @@ describe.each([
   it('should show the product payment schedule', async () => {
     const intl = createIntl({ locale: 'en' });
     const product = ProductFactory().one();
-    const schedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory().one();
+    const schedule = paymentPlan.payment_schedule;
     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,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -448,7 +445,8 @@ describe.each([
 
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
-      'Total' + formatPrice(product.price, product.price_currency).replace(/(\u202F|\u00a0)/g, ' '),
+      'Total' +
+        formatPrice(paymentPlan.price, product.price_currency).replace(/(\u202F|\u00a0)/g, ' '),
     );
   });
 
@@ -473,39 +471,49 @@ describe.each([
         }).one(),
       ],
     }).one();
-
+    const paymentPlan = PaymentPlanFactory({ discounted_price: 80 }).one();
     if (product.type === ProductType.CERTIFICATE) {
       enrollmentDiscounted.offerings[0].product = product;
-
-      fetchMock.get(
-        `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollmentDiscounted.id}&product_id=${product.id}&state=pending&state=pending_payment&state=no_payment&state=failed_payment&state=completed&state=draft&state=assigned&state=to_sign&state=signing&state=to_save_payment_method`,
-        {
-          results: [],
-          next: null,
-          previous: null,
-          count: 0,
-        },
-      );
-
+      fetchMock
+        .get(
+          `https://joanie.endpoint/api/v1.0/orders/?enrollment_id=${enrollmentDiscounted.id}&product_id=${product.id}&state=pending&state=pending_payment&state=no_payment&state=failed_payment&state=completed&state=draft&state=assigned&state=to_sign&state=signing&state=to_save_payment_method`,
+          {
+            results: [],
+            next: null,
+            previous: null,
+            count: 0,
+          },
+        )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+          paymentPlan,
+        );
       render(
-        <Wrapper product={product} enrollment={enrollmentDiscounted} isWithdrawable={true} />,
+        <Wrapper
+          product={product}
+          enrollment={enrollmentDiscounted}
+          isWithdrawable={true}
+          paymentPlan={paymentPlan}
+        />,
         { queryOptions: { client: createTestQueryClient({ user: richieUser }) } },
       );
 
       const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
       expect($totalAmount).toHaveTextContent(
         'Total' +
-          formatPrice(
-            enrollmentDiscounted.offerings[0].rules?.discounted_price!,
-            product.price_currency,
-          ).replace(/(\u202F|\u00a0)/g, ' '),
+          formatPrice(paymentPlan.price!, product.price_currency).replace(/(\u202F|\u00a0)/g, ' ') +
+          formatPrice(paymentPlan.discounted_price!, product.price_currency).replace(
+            /(\u202F|\u00a0)/g,
+            ' ',
+          ),
       );
     }
   });
 
   it('should show the product payment schedule with discounted price', async () => {
     const intl = createIntl({ locale: 'en' });
-    const schedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory({ discounted_price: 80 }).one();
+    const schedule = paymentPlan.payment_schedule;
 
     const offering = OfferingFactory({
       product: ProductFactory({
@@ -525,13 +533,21 @@ describe.each([
         [],
       )
       .get(
-        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
-        schedule,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} offering={offering} isWithdrawable={true} />, {
-      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-    });
+    render(
+      <Wrapper
+        paymentPlan={paymentPlan}
+        product={product}
+        offering={offering}
+        isWithdrawable={true}
+      />,
+      {
+        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+      },
+    );
 
     if (product.type === ProductType.CREDENTIAL) {
       await screen.findByRole('heading', { level: 4, name: 'Payment schedule' });
@@ -569,7 +585,8 @@ describe.each([
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
       'Total' +
-        formatPrice(offering!.rules!.discounted_price!, product.price_currency).replace(
+        formatPrice(paymentPlan.price!, product.price_currency).replace(/(\u202F|\u00a0)/g, ' ') +
+        formatPrice(paymentPlan.discounted_price!, product.price_currency).replace(
           /(\u202F|\u00a0)/g,
           ' ',
         ),
@@ -578,18 +595,18 @@ describe.each([
 
   it('should show a walkthrough to explain the subscription process', async () => {
     const product = ProductFactory().one();
-    const schedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory().one();
     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,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -598,18 +615,18 @@ describe.each([
 
   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);
+    const paymentPlan = PaymentPlanFactory().one();
     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,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} isWithdrawable={false} />, {
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -618,18 +635,18 @@ describe.each([
 
   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);
+    const paymentPlan = PaymentPlanFactory().one();
     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,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} isWithdrawable={true} />, {
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -638,18 +655,18 @@ describe.each([
 
   it('should show a specific checkbox to waive withdrawal right according to the product type', async () => {
     const product = ProductFactory().one();
-    const schedule = PaymentInstallmentFactory().many(2);
+    const paymentPlan = PaymentPlanFactory().one();
     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,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+        paymentPlan,
       );
 
-    render(<Wrapper product={product} isWithdrawable={false} />, {
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={false} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -672,4 +689,60 @@ describe.each([
       screen.getByText(message);
     });
   });
+
+  it('should show appropriate error messages for invalid vouchers', async () => {
+    const user = userEvent.setup({ delay: null });
+    const paymentPlan = PaymentPlanFactory().one();
+    const paymentPlanVoucher = PaymentPlanFactory({
+      discounted_price: 70,
+      discount: '-30%',
+    }).one();
+    const product = ProductFactory().one();
+    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-plan/`,
+        paymentPlan,
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT30`,
+        {
+          status: 404,
+          body: {
+            detail: 'No Voucher matches the given query.',
+          },
+        },
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT29`,
+        {
+          status: 429,
+          body: {
+            detail: 'Too many attempts. Please try again later.',
+          },
+        },
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/?voucher_code=DISCOUNT10`,
+        paymentPlanVoucher,
+      );
+    render(<Wrapper paymentPlan={paymentPlan} product={product} isWithdrawable={true} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+    expect(screen.getByLabelText('Voucher code'));
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT30');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    expect(await screen.findByText('The submitted voucher code is not valid.')).toBeInTheDocument();
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT29');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    expect(
+      await screen.findByText('Too many attempts. Please try again later.'),
+    ).toBeInTheDocument();
+    await user.type(screen.getByLabelText('Voucher code'), 'DISCOUNT10');
+    await user.click(screen.getByRole('button', { name: 'Validate' }));
+    expect(await screen.findByText('Discount applied')).toBeInTheDocument();
+  });
 });

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

@@ -4,6 +4,7 @@ import {
   CertificateProductFactory,
   EnrollmentFactory,
   OfferingFactory,
+  PaymentPlanFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
 import { PacedCourseFactory } from 'utils/test/factories/richie';
@@ -34,7 +35,9 @@ export default {
 type Story = StoryObj<typeof SaleTunnel>;
 
 export const Credential: Story = {
-  args: {},
+  args: {
+    paymentPlan: PaymentPlanFactory().one(),
+  },
 };
 
 export const CertificateDiscount: Story = {
@@ -44,5 +47,6 @@ export const CertificateDiscount: Story = {
     enrollment: EnrollmentFactory({
       offerings: OfferingFactory({ rules: { discounted_price: 80 } }).many(1),
     }).one(),
+    paymentPlan: PaymentPlanFactory({ discounted_price: 80 }).one(),
   },
 };

package/js/components/SaleTunnel/index.tsx

@@ -9,6 +9,7 @@ import {
   Organization,
   Product,
   ProductType,
+  PaymentPlan,
 } from 'types/Joanie';
 import { CredentialSaleTunnel } from 'components/SaleTunnel/CredentialSaleTunnel';
 import { CertificateSaleTunnel } from 'components/SaleTunnel/CertificateSaleTunnel';
@@ -21,6 +22,7 @@ export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'>
   isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;
   enrollment?: Enrollment;
+  paymentPlan?: PaymentPlan;
   onFinish?: (order: Order) => void;
 }
 

package/js/hooks/{usePaymentSchedule.tsx → usePaymentPlan.tsx}

@@ -1,23 +1,26 @@
 import { useQuery } from '@tanstack/react-query';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { PaymentSchedule } from 'types/Joanie';
+import { PaymentPlan } from 'types/Joanie';
 import { Nullable } from 'types/utils';
+import { HttpError } from 'utils/errors/HttpError';
 
-type PaymentScheduleFilters = {
+type PaymentPlanFilters = {
   course_code: string;
   product_id: string;
+  voucher_code?: string;
 };
 
-export const usePaymentSchedule = (filters: PaymentScheduleFilters) => {
-  const queryKey = ['courses-products', ...Object.values(filters), 'payment-schedule'];
+export const usePaymentPlan = (filters: PaymentPlanFilters) => {
+  const queryKey = ['courses-products', ...Object.values(filters), 'payment-plan'];
 
   const api = useJoanieApi();
-  return useQuery<Nullable<PaymentSchedule>, Error>({
+  return useQuery<Nullable<PaymentPlan>, HttpError>({
     queryKey,
     queryFn: () =>
-      api.courses.products.paymentSchedule.get({
+      api.courses.products.paymentPlan.get({
         id: filters.product_id,
         course_id: filters.course_code,
+        voucher_code: filters.voucher_code,
       }),
   });
 };

package/js/types/Joanie.ts

@@ -482,6 +482,13 @@ export interface PaymentInstallment {
 
 export type PaymentSchedule = readonly PaymentInstallment[];
 
+export interface PaymentPlan {
+  price: number;
+  discount?: string;
+  discounted_price?: number;
+  payment_schedule: PaymentSchedule;
+}
+
 // - API
 export interface AddressCreationPayload extends Omit<Address, 'id' | 'is_main'> {
   is_main?: boolean;
@@ -491,6 +498,7 @@ interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
   has_waived_withdrawal_right: boolean;
+  voucher_code?: string;
 }
 
 interface OrderCertificateCreationPayload extends AbstractOrderProductCreationPayload {
@@ -547,6 +555,7 @@ export interface CourseQueryFilters extends ResourcesQuery {
 export interface CourseProductQueryFilters extends ResourcesQuery {
   id?: Product['id'];
   course_id?: CourseListItem['id'];
+  voucher_code?: string;
 }
 export interface OfferingQueryFilters extends PaginatedResourceQuery {
   id?: Offering['id'];
@@ -684,8 +693,8 @@ export interface API {
       : Promise<PaginatedResponse<CourseListItem>>;
     products: {
       get(filters?: CourseProductQueryFilters): Promise<Nullable<Offering>>;
-      paymentSchedule: {
-        get(filters?: CourseProductQueryFilters): Promise<Nullable<PaymentSchedule>>;
+      paymentPlan: {
+        get(filters?: CourseProductQueryFilters): Promise<Nullable<PaymentPlan>>;
       };
     };
     orders: {

package/js/utils/errors/HttpError.ts

@@ -31,5 +31,6 @@ export enum HttpStatusCode {
   FORBIDDEN = 403,
   NOT_FOUND = 404,
   CONFLICT = 409,
+  TOO_MANY_REQUESTS = 429,
   INTERNAL_SERVER_ERROR = 500,
 }

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

@@ -37,6 +37,7 @@ import {
   ProductType,
   TargetCourse,
   UserLight,
+  PaymentPlan,
 } from 'types/Joanie';
 import { Payment, PaymentProviders } from 'components/PaymentInterfaces/types';
 import { CourseStateFactory } from 'utils/test/factories/richie';
@@ -360,6 +361,15 @@ export const PaymentInstallmentFactory = factory((): PaymentInstallment => {
   };
 });
 
+export const PaymentPlanFactory = factory((): PaymentPlan => {
+  return {
+    payment_schedule: PaymentInstallmentFactory().many(2),
+    price: faker.number.int({ min: 1, max: 1000, multipleOf: 10 }),
+    discount: undefined,
+    discounted_price: undefined,
+  };
+});
+
 export const OrderEnrollmentFactory = factory((): OrderEnrollment => {
   return {
     id: faker.string.uuid(),
@@ -492,5 +502,6 @@ export const SaleTunnelContextFactory = factory(
     unregisterSubmitCallback: noop,
     runSubmitCallbacks: () => new Promise((resolve) => resolve()),
     nextStep: noop,
+    setVoucherCode: noop,
   }),
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.2.1-dev1",
+  "version": "3.2.1-dev11",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {