richie 3.2.0__py2.py3-none-any.whl → 3.2.1.dev9__py2.py3-none-any.whl

frontend/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,35 @@ describe.each([
       screen.getByText(message);
     });
   });
+
+  it('should show an error when submit an invalid voucher', async () => {
+    const user = userEvent.setup({ delay: null });
+    const paymentPlan = PaymentPlanFactory().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.',
+          },
+        },
+      );
+    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();
+  });
 });

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

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,25 @@
+import { useQuery } from '@tanstack/react-query';
+import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { PaymentPlan } from 'types/Joanie';
+import { Nullable } from 'types/utils';
+
+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>, Error>({
+    queryKey,
+    queryFn: () =>
+      api.courses.products.paymentPlan.get({
+        id: filters.product_id,
+        course_id: filters.course_code,
+        voucher_code: filters.voucher_code,
+      }),
+  });
+};

frontend/js/types/Joanie.ts

@@ -200,7 +200,7 @@ export interface OfferingRule {
 
 export interface Offering extends OfferingLight {
   is_withdrawable: boolean;
-  rules: OfferingRule;
+  rules?: OfferingRule;
 }
 export function isOffering(
   entity: CourseListItem | OfferingLight | RichieCourse,
@@ -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: {

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

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/CourseProductItemFooter/index.tsx

@@ -33,7 +33,7 @@ const CourseProductItemFooter = ({
   offering,
   canPurchase,
 }: CourseProductItemFooterProps) => {
-  if (!offering.rules.has_seats_left)
+  if (!offering?.rules?.has_seats_left)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
@@ -50,7 +50,7 @@ const CourseProductItemFooter = ({
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
-      {offering.rules.has_seat_limit && (
+      {offering?.rules?.has_seat_limit && (
         <p className="product-widget__footer__message">
           <FormattedMessage
             {...messages.nbSeatsAvailable}

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.spec.tsx

@@ -194,7 +194,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offering.rules.discounted_price!).replace(
+      priceFormatter(product.price_currency, offering.rules!.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -257,7 +257,7 @@ describe('CourseProductItem', () => {
     const discountedPriceLabel = screen.getByText('Discounted price:');
     expect(discountedPriceLabel.classList.contains('offscreen')).toBe(true);
     const discountedPrice = screen.getByText(
-      priceFormatter(product.price_currency, offering.rules.discounted_price!).replace(
+      priceFormatter(product.price_currency, offering.rules!.discounted_price!).replace(
         /(\u202F|\u00a0)/g,
         ' ',
       ),
@@ -838,4 +838,39 @@ describe('CourseProductItem', () => {
     expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
     screen.getByText('Sorry, no seats available for now');
   });
+
+  it('renders product information without rules in offering', async () => {
+    const offering = OfferingFactory({
+      product: CredentialProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      rules: undefined,
+    }).one();
+    const { product } = offering;
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/00000/products/${product.id}/`,
+      offering,
+    );
+
+    render(
+      <CourseProductItem
+        course={PacedCourseFactory({ code: '00000' }).one()}
+        productId={product.id}
+      />,
+      { queryOptions: { client: createTestQueryClient({ user: null }) } },
+    );
+
+    // Wait for product information to be fetched
+    await screen.findByRole('heading', { level: 3, name: product.title });
+
+    // Expect to render the component without rules information
+    expect(
+      screen.getByText(
+        priceFormatter(product.price_currency, product.price).replace(/(\u202F|\u00a0)/g, ' '),
+      ),
+    ).toBeInTheDocument();
+    expect(document.querySelector('.product-widget__price-discounted')).not.toBeInTheDocument();
+    expect(screen.getByText('Sorry, no seats available for now')).toBeInTheDocument();
+  });
 });

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/index.tsx

@@ -103,7 +103,7 @@ const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }
       return null;
     }
 
-    if (offering.rules.discounted_price != null) {
+    if (offering?.rules?.discounted_price != null) {
       return (
         <>
           <span id="original-price" className="offscreen">
@@ -133,7 +133,7 @@ const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }
     return (
       <FormattedNumber currency={product.price_currency} value={product.price} style="currency" />
     );
-  }, [canPurchase, offering.rules.discounted_price, product.price]);
+  }, [canPurchase, offering?.rules?.discounted_price, product.price]);
 
   return (
     <header className="product-widget__header">
@@ -144,10 +144,10 @@ const Header = ({ product, order, offering, hasPurchased, canPurchase, compact }
         {hasPurchased && <FormattedMessage {...messages.purchased} />}
         {displayPrice}
       </strong>
-      {offering?.rules.description && (
+      {offering?.rules?.description && (
         <p className="product-widget__header-description">{offering.rules.description}</p>
       )}
-      {offering?.rules.discounted_price && (
+      {offering?.rules?.discounted_price && (
         <p className="product-widget__header-discount">
           {offering.rules.discount_rate ? (
             <span className="product-widget__header-discount-rate">