richie 3.1.3.dev2__py2.py3-none-any.whl → 3.1.3.dev7__py2.py3-none-any.whl

frontend/js/components/PurchaseButton/index.tsx

@@ -42,7 +42,7 @@ const messages = defineMessages({
 
 interface PurchaseButtonPropsBase {
   product: Joanie.CredentialProduct | Joanie.CertificateProduct;
-  orderGroup?: Joanie.OrderGroup;
+  courseProductRelation?: Joanie.CourseProductRelation;
   isWithdrawable: boolean;
   disabled?: boolean;
   className?: string;
@@ -66,8 +66,8 @@ interface CertificatePurchaseButtonProps extends PurchaseButtonPropsBase {
 const PurchaseButton = ({
   product,
   course,
+  courseProductRelation,
   enrollment,
-  orderGroup,
   isWithdrawable,
   organizations,
   disabled = false,
@@ -140,8 +140,8 @@ const PurchaseButton = ({
         {...saleTunnelModal}
         product={product}
         organizations={organizations}
+        courseProductRelation={courseProductRelation}
         enrollment={enrollment}
-        orderGroup={orderGroup}
         course={course}
         isWithdrawable={isWithdrawable}
         onFinish={onFinish}

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

@@ -19,9 +19,7 @@ export const CredentialSaleTunnel = (props: CredentialSaleTunnelProps) => {
   );
 };
 
-const CredentialPaymentButton = ({
-  course,
-}: Pick<CredentialSaleTunnelProps, 'course' | 'orderGroup'>) => {
+const CredentialPaymentButton = ({ course }: Pick<CredentialSaleTunnelProps, 'course'>) => {
   return (
     <SubscriptionButton
       buildOrderPayload={(payload) => ({

frontend/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -10,7 +10,14 @@ import {
 } from 'react';
 import { SaleTunnelSponsors } from 'components/SaleTunnel/Sponsors/SaleTunnelSponsors';
 import { SaleTunnelProps } from 'components/SaleTunnel/index';
-import { Address, CreditCard, Order, OrderState, Product } from 'types/Joanie';
+import {
+  Address,
+  CourseProductRelation,
+  CreditCard,
+  Order,
+  OrderState,
+  Product,
+} from 'types/Joanie';
 import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelSuccess } from 'components/SaleTunnel/SaleTunnelSuccess';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
@@ -26,6 +33,7 @@ export interface SaleTunnelContextType {
   order?: Order;
   product: Product;
   webAnalyticsEventKey: string;
+  relation?: CourseProductRelation;
 
   // internal
   step: SaleTunnelStep;
@@ -113,6 +121,7 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       webAnalyticsEventKey: props.eventKey,
       order,
       product: props.product,
+      relation: props.courseProductRelation,
       props,
       billingAddress,
       setBillingAddress,

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

@@ -99,7 +99,7 @@ const Email = () => {
 };
 
 const Total = () => {
-  const { product } = useSaleTunnelContext();
+  const { product, relation } = useSaleTunnelContext();
   return (
     <div className="sale-tunnel__total">
       <div className="sale-tunnel__total__amount mt-t" data-testid="sale-tunnel__total__amount">
@@ -108,7 +108,7 @@ const Total = () => {
         </div>
         <div className="block-title">
           <FormattedNumber
-            value={product.price}
+            value={relation?.discounted_price || product.price}
             style="currency"
             currency={product.price_currency}
           />

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

@@ -72,7 +72,7 @@ interface Props {
   buildOrderPayload: (
     payload: Pick<
       OrderCreationPayload,
-      'product_id' | 'billing_address' | 'order_group_id' | 'has_waived_withdrawal_right'
+      'product_id' | 'billing_address' | 'has_waived_withdrawal_right'
     >,
   ) => OrderCreationPayload;
 }
@@ -124,7 +124,6 @@ const SubscriptionButton = ({ buildOrderPayload }: Props) => {
     const payload = buildOrderPayload({
       product_id: product.id,
       billing_address: billingAddress!,
-      order_group_id: saleTunnelProps.orderGroup?.id,
       has_waived_withdrawal_right: hasWaivedWithdrawalRight,
     });
 

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

@@ -1,5 +1,5 @@
 import fetchMock from 'fetch-mock';
-import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
@@ -11,11 +11,9 @@ import {
   AddressFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
-  OrderGroupFactory,
 } from 'utils/test/factories/joanie';
 import type * as Joanie from 'types/Joanie';
-import { Maybe } from 'types/utils';
-import { NOT_CANCELED_ORDER_STATES, OrderCredentialCreationPayload } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES } from 'types/Joanie';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { render } from 'utils/test/render';
 import { getAddressLabel } from 'components/SaleTunnel/AddressSelector';
@@ -83,11 +81,9 @@ describe('SaleTunnel / Credential', () => {
   it('should create an order with an order group', async () => {
     const course = PacedCourseFactory().one();
     const product = CredentialProductFactory().one();
-    const orderGroup = OrderGroupFactory().one();
     const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
 
-    let createOrderPayload: Maybe<OrderCredentialCreationPayload>;
-    const order = CredentialOrderFactory({ order_group_id: orderGroup.id }).one();
+    const order = CredentialOrderFactory().one();
     const orderQueryParameters = {
       course_code: course.code,
       product_id: product.id,
@@ -100,15 +96,12 @@ describe('SaleTunnel / Credential', () => {
         `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
         [],
       )
-      .post('https://joanie.endpoint/api/v1.0/orders/', (_, { body }) => {
-        createOrderPayload = JSON.parse(body as any);
-        return order;
-      })
+      .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
       });
 
-    render(<Wrapper product={product} course={course} orderGroup={orderGroup} />, {
+    render(<Wrapper product={product} course={course} />, {
       queryOptions: { client: createTestQueryClient({ user: richieUser }) },
     });
 
@@ -121,12 +114,5 @@ describe('SaleTunnel / Credential', () => {
 
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);
-
-    // - User clicks on pay button
-    await act(async () => {
-      fireEvent.click($button);
-    });
-
-    await waitFor(() => expect(createOrderPayload?.order_group_id).toEqual(orderGroup.id));
   });
 });

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

@@ -15,6 +15,7 @@ import {
   AddressFactory,
   CertificateOrderFactory,
   CertificateProductFactory,
+  CourseProductRelationFactory,
   CredentialOrderFactory,
   CredentialProductFactory,
   CreditCardFactory,
@@ -432,6 +433,80 @@ describe.each([
         name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
       });
     });
+
+    const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmount).toHaveTextContent(
+      'Total' + formatPrice(product.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 relation = CourseProductRelationFactory({
+      product: ProductFactory({
+        price: 840,
+        price_currency: 'EUR',
+      }).one(),
+      discounted_price: 800,
+      discount_rate: 0.3,
+    }).one();
+    const { product } = relation;
+
+    fetchMock
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(getFetchOrderQueryParams(product))}`,
+        [],
+      )
+      .get(
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+        schedule,
+      );
+
+    render(<Wrapper product={product} courseProductRelation={relation} isWithdrawable={true} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
+
+    await screen.findByRole('heading', {
+      level: 4,
+      name: 'Payment schedule',
+    });
+
+    const scheduleTable = screen.getByRole('table');
+    const scheduleTableRows = within(scheduleTable).getAllByRole('row');
+    expect(scheduleTableRows).toHaveLength(schedule.length);
+
+    scheduleTableRows.forEach((row, index) => {
+      const installment = schedule[index];
+      // A first column should show the installment index
+      within(row).getByRole('cell', {
+        name: (index + 1).toString(),
+      });
+      // A 2nd column should show the installment amount
+      within(row).getByRole('cell', {
+        name: formatPrice(installment.amount, installment.currency),
+      });
+      // A 3rd column should show the installment withdraw date
+      within(row).getByRole('cell', {
+        name: `Withdrawn on ${intl.formatDate(installment.due_date, {
+          ...DEFAULT_DATE_FORMAT,
+        })}`,
+      });
+      // A 4th column should show the installment state
+      within(row).getByRole('cell', {
+        name: StringHelper.capitalizeFirst(installment.state.replace('_', ' '))!,
+      });
+    });
+
+    const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
+    expect($totalAmount).toHaveTextContent(
+      'Total' +
+        formatPrice(relation!.discounted_price!, product.price_currency).replace(
+          /(\u202F|\u00a0)/g,
+          ' ',
+        ),
+    );
   });
 
   it('should show a walkthrough to explain the subscription process', async () => {

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

@@ -15,7 +15,6 @@ export default {
       isWithdrawable: true,
       // enrollment?: Enrollment;
       // product: CredentialProduct | CertificateProduct;
-      // orderGroup?: OrderGroup;
       // onFinish?: (order: Order) => void;
     };
     return (

frontend/js/components/SaleTunnel/index.tsx

@@ -2,10 +2,10 @@ import { ModalProps } from '@openfun/cunningham-react';
 import {
   CertificateProduct,
   CourseLight,
+  CourseProductRelation,
   CredentialProduct,
   Enrollment,
   Order,
-  OrderGroup,
   Organization,
   Product,
   ProductType,
@@ -16,11 +16,11 @@ import { PacedCourse } from 'types';
 
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
+  courseProductRelation?: CourseProductRelation;
   organizations?: Organization[];
   isWithdrawable: boolean;
   course?: PacedCourse | CourseLight;
   enrollment?: Enrollment;
-  orderGroup?: OrderGroup;
   onFinish?: (order: Order) => void;
 }
 

frontend/js/types/Joanie.ts

@@ -183,8 +183,15 @@ export interface CourseProductRelationLight {
 }
 
 export interface CourseProductRelation extends CourseProductRelationLight {
-  order_groups: OrderGroup[];
   is_withdrawable: boolean;
+  discounted_price: Nullable<number>;
+  discount_rate: Nullable<number>;
+  discount_amount: Nullable<number>;
+  discount_start: Nullable<string>;
+  discount_end: Nullable<string>;
+  description: Nullable<string>;
+  nb_seats_available: Nullable<number>;
+  seats: Nullable<number>;
 }
 export function isCourseProductRelation(
   entity: CourseListItem | CourseProductRelationLight | RichieCourse,
@@ -325,7 +332,6 @@ export interface Order {
   enrollment: Nullable<EnrollmentLight>;
   organization_id: Organization['id'];
   organization: Organization;
-  order_group_id?: OrderGroup['id'];
   payment_schedule?: PaymentSchedule;
   credit_card_id?: CreditCard['id'];
 }
@@ -403,13 +409,6 @@ export interface CourseOrderResourceQuery extends PaginatedResourceQuery {
   product_id?: Product['id'];
 }
 
-export interface OrderGroup {
-  id: string;
-  is_active: boolean;
-  nb_seats: number;
-  nb_available_seats: number;
-}
-
 export enum CreditCardBrand {
   MASTERCARD = 'mastercard',
   MAESTRO = 'maestro',
@@ -481,7 +480,6 @@ export interface AddressCreationPayload extends Omit<Address, 'id' | 'is_main'>
 
 interface AbstractOrderProductCreationPayload {
   product_id: Product['id'];
-  order_group_id?: OrderGroup['id'];
   billing_address: Omit<Address, 'id' | 'is_main'>;
   has_waived_withdrawal_right: boolean;
 }

frontend/js/utils/ProductHelper/index.ts

@@ -1,5 +1,5 @@
 import { IntlShape } from 'react-intl';
-import { CourseProductRelation, Product, TargetCourse } from 'types/Joanie';
+import { Product, TargetCourse } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import { IntlHelper } from 'utils/IntlHelper';
 import * as Joanie from 'types/Joanie';
@@ -44,10 +44,6 @@ export class ProductHelper {
     return IntlHelper.getLocalizedLanguages(uniqueLanguages, intl);
   }
 
-  static getActiveOrderGroups(courseProductRelation: CourseProductRelation) {
-    return courseProductRelation.order_groups?.filter((orderGroup) => orderGroup.is_active);
-  }
-
   static hasRemainingSeats(product: Maybe<Product>) {
     if (!product) return false;
     return typeof product?.remaining_order_count !== 'number' || product.remaining_order_count > 0;

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

@@ -28,7 +28,6 @@ import {
   NestedCredentialOrder,
   Order,
   OrderEnrollment,
-  OrderGroup,
   PaymentInstallment,
   OrderLite,
   OrderState,
@@ -197,7 +196,7 @@ export const CredentialProductFactory = factory((): CredentialProduct => {
     created_on: faker.date.past().toISOString(),
     title: FactoryHelper.sequence((counter) => `Certificate Product ${counter}`),
     type: ProductType.CREDENTIAL,
-    price: faker.number.int(),
+    price: faker.number.int({ min: 1, max: 1000, multipleOf: 10 }),
     price_currency: faker.finance.currencyCode(),
     call_to_action: faker.lorem.words(3),
     certificate_definition: CertificationDefinitionFactory().one(),
@@ -294,25 +293,6 @@ export const CourseLightFactory = factory((): CourseLight => {
   };
 });
 
-export const OrderGroupFactory = factory((): OrderGroup => {
-  const seats = faker.number.int({ min: 5, max: 100 });
-  return {
-    id: faker.string.uuid(),
-    is_active: true,
-    nb_seats: seats,
-    nb_available_seats: faker.number.int({ min: 2, max: seats }),
-  };
-});
-
-export const OrderGroupFullFactory = factory((): OrderGroup => {
-  return {
-    id: faker.string.uuid(),
-    is_active: true,
-    nb_seats: faker.number.int({ min: 5, max: 100 }),
-    nb_available_seats: 0,
-  };
-});
-
 export const NestedCourseOrderFactory = factory((): NestedCourseOrder => {
   return {
     id: faker.string.uuid(),
@@ -336,8 +316,15 @@ export const CourseProductRelationFactory = factory((): CourseProductRelation =>
     course: CourseFactory().one(),
     product: ProductFactory().one(),
     organizations: OrganizationFactory().many(1),
-    order_groups: [],
     is_withdrawable: true,
+    discounted_price: null,
+    discount_rate: null,
+    discount_amount: null,
+    discount_start: null,
+    discount_end: null,
+    description: null,
+    seats: null,
+    nb_seats_available: null,
   };
 });
 

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

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import PurchaseButton from 'components/PurchaseButton';
-import { CourseProductRelation, CredentialProduct, OrderGroup } from 'types/Joanie';
+import { CourseProductRelation, CredentialProduct } from 'types/Joanie';
 import { PacedCourse } from 'types';
 
 const messages = defineMessages({
@@ -26,54 +26,43 @@ interface CourseProductItemFooterProps {
   course: PacedCourse;
   courseProductRelation: CourseProductRelation;
   canPurchase: boolean;
-  orderGroups: OrderGroup[];
-  orderGroupsAvailable: OrderGroup[];
 }
 
 const CourseProductItemFooter = ({
   course,
   courseProductRelation,
-  orderGroups,
-  orderGroupsAvailable,
   canPurchase,
 }: CourseProductItemFooterProps) => {
-  if (orderGroups.length === 0) {
-    return (
-      <PurchaseButton
-        course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
-        disabled={!canPurchase}
-        buttonProps={{ fullWidth: true }}
-      />
-    );
-  }
-  if (orderGroupsAvailable.length === 0) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const { seats, nb_seats_available } = courseProductRelation;
+  const hasSeatsLimit = seats && nb_seats_available !== undefined;
+  const hasNoSeatsAvailable = hasSeatsLimit && nb_seats_available === 0;
+  if (hasNoSeatsAvailable)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
       </p>
     );
-  }
-  return orderGroupsAvailable.map((orderGroup) => (
-    <div className="product-widget__footer__order-group" key={orderGroup.id}>
+  return (
+    <div className="product-widget__footer__order-group">
       <PurchaseButton
         course={course}
         product={courseProductRelation.product as CredentialProduct}
+        courseProductRelation={courseProductRelation}
         organizations={courseProductRelation.organizations}
         isWithdrawable={courseProductRelation.is_withdrawable}
         disabled={!canPurchase}
-        orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}
       />
-      <p className="product-widget__footer__message">
-        <FormattedMessage
-          {...messages.nbSeatsAvailable}
-          values={{ nb: orderGroup.nb_available_seats }}
-        />
-      </p>
+      {hasSeatsLimit && (
+        <p className="product-widget__footer__message">
+          <FormattedMessage
+            {...messages.nbSeatsAvailable}
+            values={{ nb: courseProductRelation.nb_seats_available }}
+          />
+        </p>
+      )}
     </div>
-  ));
+  );
 };
 export default CourseProductItemFooter;

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/_styles.scss

@@ -43,6 +43,7 @@
     background-color: r-theme-val(product-item, base-border);
     color: r-theme-val(product-item, light-color);
     justify-content: space-between;
+    text-align: center;
     padding: 1rem 0.5rem;
 
     &-main {
@@ -51,6 +52,8 @@
       font-family: $r-font-family-montserrat;
       font-weight: bold;
       justify-content: space-between;
+      text-align: initial;
+      margin-bottom: rem-calc(8px);
     }
 
     &-metadata {
@@ -74,10 +77,30 @@
       border-radius: 100vw;
       color: r-theme-val(product-item, base-border);
       font-size: 0.81rem;
-      margin-bottom: 0;
-      margin-left: rem-calc(8px);
+      margin-bottom: 0.3rem;
       padding: 0.375rem 0.81rem;
       white-space: nowrap;
+      display: inline-block;
+
+      &-discounted {
+        text-decoration: line-through;
+        margin-right: rem-calc(6px);
+        font-size: 0.73rem;
+      }
+
+      &-discount {
+        color: r-theme-val(product-item, feedback-color);
+      }
+    }
+
+    &-description,
+    &-discount {
+      font-size: 1.1rem;
+      margin: 0;
+    }
+
+    &-discount {
+      font-weight: bold;
     }
   }
 
@@ -149,13 +172,10 @@
 
     &__order-group {
       text-align: center;
+      margin-bottom: 0.5rem;
 
       .product-widget__footer__message {
-        margin: 0.5rem 0;
-      }
-
-      &:last-child {
-        margin-bottom: -1rem;
+        margin: 0.5rem 0 0;
       }
     }
   }

frontend/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/CourseRunList.tsx

@@ -38,7 +38,7 @@ const CourseRunList = ({ courseRuns }: Props) => {
       <ol className="course-runs-list">
         {Children.toArray(
           courseRuns.map((courseRun) => (
-            <li className="course-runs-item course-runs-item--inactive">
+            <li key={courseRun.id} className="course-runs-item course-runs-item--inactive">
               <strong className="course-runs-item__course-dates">
                 <span
                   className="offscreen"