richie 3.1.3.dev23__py2.py3-none-any.whl → 3.2.1__py2.py3-none-any.whl

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

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

@@ -8,6 +8,7 @@ import { useState } from 'react';
 import { OrderState, Product, ProductType, NOT_CANCELED_ORDER_STATES } from 'types/Joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
+  CourseStateFactory,
   UserFactory,
   PacedCourseFactory,
 } from 'utils/test/factories/richie';
@@ -16,12 +17,14 @@ import {
   CertificateOrderFactory,
   CertificateProductFactory,
   OfferingFactory,
+  CourseRunFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
   CreditCardFactory,
   EnrollmentFactory,
-  PaymentInstallmentFactory,
+  PaymentPlanFactory,
 } from 'utils/test/factories/joanie';
+import { Priority } from 'types';
 import { render } from 'utils/test/render';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
@@ -97,7 +100,7 @@ describe.each([
     return (
       <SaleTunnel
         {...props}
-        enrollment={enrollment}
+        enrollment={props.enrollment ?? enrollment}
         course={productType === ProductType.CREDENTIAL ? course : undefined}
         isOpen={open}
         onClose={() => setOpen(false)}
@@ -160,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)
@@ -176,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 });
@@ -250,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 });
@@ -325,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,
@@ -342,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 }) },
     });
 
@@ -361,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,
@@ -378,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 }) },
       });
 
@@ -392,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 }) },
     });
 
@@ -445,13 +445,75 @@ 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, ' '),
     );
   });
 
+  // Fixes the issue : https://github.com/openfun/richie/issues/2645
+  it('should show the certificate product total with discounted price', async () => {
+    const product = ProductFactory({
+      price: 600,
+      target_courses: [course],
+    }).one();
+    const enrollmentDiscounted = EnrollmentFactory({
+      course_run: CourseRunFactory({
+        state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+        course,
+      }).one(),
+      offerings: [
+        OfferingFactory({
+          product,
+          rules: {
+            discounted_price: 540,
+            discount_rate: 0.1,
+          },
+        }).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,
+          },
+        )
+        .get(
+          `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-plan/`,
+          paymentPlan,
+        );
+      render(
+        <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(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({
@@ -471,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' });
@@ -515,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,
           ' ',
         ),
@@ -524,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 }) },
     });
 
@@ -544,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 }) },
     });
 
@@ -564,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 }) },
     });
 
@@ -584,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 }) },
     });
 
@@ -618,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();
+  });
 });

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

@@ -1,6 +1,12 @@
 import { StoryObj, Meta } from '@storybook/react';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
-import { ProductFactory } from 'utils/test/factories/joanie';
+import {
+  CertificateProductFactory,
+  EnrollmentFactory,
+  OfferingFactory,
+  PaymentPlanFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
 import { PacedCourseFactory } from 'utils/test/factories/richie';
 import { SaleTunnel, SaleTunnelProps } from './index';
 
@@ -28,6 +34,19 @@ export default {
 
 type Story = StoryObj<typeof SaleTunnel>;
 
-export const Default: Story = {
-  args: {},
+export const Credential: Story = {
+  args: {
+    paymentPlan: PaymentPlanFactory().one(),
+  },
+};
+
+export const CertificateDiscount: Story = {
+  args: {
+    product: CertificateProductFactory({ price: 100, price_currency: 'EUR' }).one(),
+    course: PacedCourseFactory().one(),
+    enrollment: EnrollmentFactory({
+      offerings: OfferingFactory({ rules: { discounted_price: 80 } }).many(1),
+    }).one(),
+    paymentPlan: PaymentPlanFactory({ discounted_price: 80 }).one(),
+  },
 };

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

frontend/js/hooks/usePaymentPlan.tsx

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

frontend/js/settings/index.ts

@@ -29,4 +29,5 @@ export const {
   MOCK_SERVICE_WORKER_ENABLED,
   DEBUG_UNION_RESOURCES_HOOK,
   CURRENT_JOANIE_DEV_DEMO_USER,
+  SLIDER_SETTINGS,
 } = settings;

frontend/js/settings/settings.prod.ts

@@ -61,3 +61,4 @@ export const PER_PAGE = {
 
 export const MOCK_SERVICE_WORKER_ENABLED = false;
 export const DEBUG_UNION_RESOURCES_HOOK = false;
+export const SLIDER_SETTINGS = { autoplayDelay: 3000 };