richie 2.29.2__py2.py3-none-any.whl → 2.30.0__py2.py3-none-any.whl

frontend/js/components/SaleTunnel/_styles.scss

@@ -33,13 +33,15 @@
       flex: 1;
       overflow: hidden;
     }
+
+    &__column {
+      display: flex;
+      flex-direction: column;
+      gap: var(--c--theme--spacings--b);
+    }
   }
 
   &__information {
-    display: flex;
-    flex-direction: column;
-    gap: var(--c--theme--spacings--b);
-
     &__billing-address {
       display: flex;
       align-items: center;
@@ -103,14 +105,23 @@
   text-align: left;
 }
 
-.sale-tunnel-end {
+.sale-tunnel-step {
   align-items: center;
   display: flex;
   flex-direction: column;
 
   &__header {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     margin-bottom: 0;
     text-align: center;
+
+    & > .icon {
+      --size: 4.5rem;
+      height: var(--size);
+      width: var(--size);
+    }
   }
 
   &__title {

frontend/js/components/SaleTunnel/hooks/useTerms.tsx

@@ -1,77 +0,0 @@
-import { Checkbox } from '@openfun/cunningham-react';
-import { useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Product } from 'types/Joanie';
-import context from 'utils/context';
-import { PaymentErrorMessageId } from 'components/PaymentInterfaces/types';
-
-const messages = defineMessages({
-  termsMessage: {
-    defaultMessage: 'By checking this box, you accept the ',
-    description: 'Message next to the checkbox in order to accept the terms',
-    id: 'components.PaymentButton.termsMessage',
-  },
-  termsMessageLink: {
-    defaultMessage: 'General Terms of Sale',
-    description: 'Clickable link included in the terms message',
-    id: 'components.SaleTunnelStepPayment.termsMessageLink',
-  },
-  termsMessageLinkTitle: {
-    defaultMessage: 'Open a preview of the General Terms of Sale',
-    description: 'Title of clickable link included in the terms message',
-    id: 'components.SaleTunnelStepPayment.termsMessageLinkTitle',
-  },
-});
-
-export const useTerms = ({
-  product,
-  onError,
-  error,
-}: {
-  product: Product;
-  onError: (error: PaymentErrorMessageId | string) => void;
-  error?: PaymentErrorMessageId | string;
-}) => {
-  const intl = useIntl();
-  const [termsAccepted, setTermsAccepted] = useState(false);
-  const validateTerms = () => {
-    if (!product.contract_definition) {
-      return;
-    }
-    if (!termsAccepted) {
-      onError(PaymentErrorMessageId.ERROR_TERMS);
-    }
-  };
-
-  return {
-    termsAccepted: termsAccepted || !product.contract_definition,
-    validateTerms,
-    renderTermsCheckbox: () => {
-      if (!product.contract_definition) {
-        return null;
-      }
-      return (
-        <section className="payment-button__terms">
-          <Checkbox
-            label={
-              <>
-                {intl.formatMessage(messages.termsMessage)}{' '}
-                <a
-                  href={context.site_urls.terms_and_conditions ?? '#'}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  title={intl.formatMessage(messages.termsMessageLinkTitle)}
-                >
-                  {intl.formatMessage(messages.termsMessageLink)}
-                </a>
-              </>
-            }
-            onChange={(e) => setTermsAccepted(e.target.checked)}
-            checked={termsAccepted}
-            state={error === PaymentErrorMessageId.ERROR_TERMS ? 'error' : 'default'}
-          />
-        </section>
-      );
-    },
-  };
-};

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

@@ -1,5 +1,6 @@
 import fetchMock from 'fetch-mock';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
+import queryString from 'query-string';
 import {
   RichieContextFactory as mockRichieContextFactory,
   PacedCourseFactory,
@@ -8,13 +9,13 @@ import {
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import {
   AddressFactory,
-  CredentialOrderWithPaymentFactory,
+  CredentialOrderFactory,
   CredentialProductFactory,
   OrderGroupFactory,
 } from 'utils/test/factories/joanie';
 import type * as Joanie from 'types/Joanie';
 import { Maybe } from 'types/utils';
-import { OrderCredentialCreationPayload } from 'types/Joanie';
+import { NOT_CANCELED_ORDER_STATES, OrderCredentialCreationPayload } from 'types/Joanie';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel/index';
 import { render } from 'utils/test/render';
 import { getAddressLabel } from 'components/SaleTunnel/AddressSelector';
@@ -56,12 +57,6 @@ describe('SaleTunnel / Credential', () => {
     return <SaleTunnel {...props} isOpen={true} onClose={() => {}} />;
   };
 
-  const formatPrice = (price: number, currency: string) =>
-    new Intl.NumberFormat('en', {
-      currency,
-      style: 'currency',
-    }).format(price);
-
   setupJoanieSession();
 
   beforeEach(() => {
@@ -92,22 +87,23 @@ describe('SaleTunnel / Credential', () => {
     const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();
 
     let createOrderPayload: Maybe<OrderCredentialCreationPayload>;
-    const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
+    const order = CredentialOrderFactory({ order_group_id: orderGroup.id }).one();
+    const orderQueryParameters = {
+      course_code: course.code,
+      product_id: product.id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`;
     fetchMock
+      .get(url, [])
       .get(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
+        `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
         [],
       )
-      .post('https://joanie.endpoint/api/v1.0/orders/', (url, { body }) => {
+      .post('https://joanie.endpoint/api/v1.0/orders/', (_, { body }) => {
         createOrderPayload = JSON.parse(body as any);
         return order;
       })
-      .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
-        paymentInfo,
-      })
-      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, {
-        ...order,
-      })
       .get('https://joanie.endpoint/api/v1.0/addresses/', [billingAddress], {
         overwriteRoutes: true,
       });
@@ -120,16 +116,9 @@ describe('SaleTunnel / Credential', () => {
     await screen.findByText(getAddressLabel(billingAddress));
 
     const $button = screen.getByRole('button', {
-      name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+      name: `Subscribe`,
     }) as HTMLButtonElement;
 
-    const $terms = screen.getByLabelText(
-      'By checking this box, you accept the General Terms of Sale',
-    );
-    await act(async () => {
-      fireEvent.click($terms);
-    });
-
     // - Payment button should not be disabled.
     expect($button.disabled).toBe(false);
 

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

@@ -1,8 +1,9 @@
-import { screen, within } from '@testing-library/react';
+import { act, screen, within } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import queryString from 'query-string';
 import userEvent from '@testing-library/user-event';
 import countries from 'i18n-iso-countries';
+import { getAllByRole } from '@testing-library/dom';
 import {
   RichieContextFactory as mockRichieContextFactory,
   PacedCourseFactory,
@@ -13,10 +14,14 @@ import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import CourseProductItem from 'widgets/SyllabusCourseRunsList/components/CourseProductItem';
 import {
   AddressFactory,
-  CredentialOrderWithPaymentFactory,
+  ContractFactory,
   CourseProductRelationFactory,
+  CredentialOrderFactory,
+  CreditCardFactory,
+  PaymentFactory,
+  PaymentInstallmentFactory,
 } from 'utils/test/factories/joanie';
-import { ACTIVE_ORDER_STATES, CourseRun } from 'types/Joanie';
+import { CourseRun, NOT_CANCELED_ORDER_STATES, OrderState } from 'types/Joanie';
 import { Priority } from 'types';
 import { expectMenuToBeClosed, expectMenuToBeOpen } from 'utils/test/Cunningham';
 import { changeSelect } from 'components/Form/test-utils';
@@ -25,6 +30,7 @@ import { OpenEdxApiProfileFactory } from 'utils/test/factories/openEdx';
 import { User } from 'types/User';
 import { OpenEdxApiProfile } from 'types/openEdx';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { Deferred } from 'utils/test/deferred';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -53,6 +59,12 @@ describe('SaleTunnel', () => {
   let openApiEdxProfile: OpenEdxApiProfile;
   setupJoanieSession();
 
+  const dateFormatter = Intl.DateTimeFormat('en', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  });
+
   const priceFormatter = (currency: string, price: number) =>
     new Intl.NumberFormat('en', {
       currency,
@@ -80,37 +92,37 @@ describe('SaleTunnel', () => {
     fetchMock.get(`https://auth.test/api/v1.0/user/me`, richieUser);
   });
 
-  it('tests the entire process of buying a credential product', async () => {
+  it('tests the entire process of subscribing to a credential product', async () => {
     /**
      * Initialization.
      */
-    const relation = CourseProductRelationFactory().one();
-    const { product, course } = relation;
+    const course = PacedCourseFactory().one();
+    const relation = CourseProductRelationFactory({ course }).one();
+    const paymentSchedule = PaymentInstallmentFactory().many(2);
+    const { product } = relation;
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
       relation,
     );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/payment-schedule/`,
+      paymentSchedule,
+    );
     fetchMock.get(`https://joanie.endpoint/api/v1.0/enrollments/`, []);
     const orderQueryParameters = {
       product_id: product.id,
       course_code: course.code,
-      state: ACTIVE_ORDER_STATES,
+      state: NOT_CANCELED_ORDER_STATES,
     };
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
       [],
     );
 
-    render(
-      <CourseProductItem
-        productId={product.id}
-        course={PacedCourseFactory({ id: course.id, code: course.code }).one()}
-      />,
-      {
-        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-      },
-    );
+    render(<CourseProductItem productId={product.id} course={course} />, {
+      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+    });
 
     // Wait for product information to be fetched
     await screen.findByRole('heading', { level: 3, name: product.title });
@@ -210,10 +222,11 @@ describe('SaleTunnel', () => {
 
     // - User fulfills address fields
     const address = AddressFactory({ is_main: true }).one();
-    fetchMock.post('https://joanie.endpoint/api/v1.0/addresses/', address);
-    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', [address], {
-      overwriteRoutes: true,
-    });
+    fetchMock
+      .post('https://joanie.endpoint/api/v1.0/addresses/', address)
+      .get('https://joanie.endpoint/api/v1.0/addresses/', [address], {
+        overwriteRoutes: true,
+      });
 
     await user.type($titleField, address.title);
     await user.type($firstnameField, address.first_name);
@@ -229,16 +242,23 @@ describe('SaleTunnel', () => {
     ).toBeInTheDocument();
 
     /**
-     * Make sure no credit card is selected.
+     * Make sure the payment schedule is displayed.
      */
-    screen.getByRole('heading', {
-      name: 'Payment method',
+    screen.getByRole('heading', { name: 'Payment schedule' });
+    paymentSchedule.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[2]).toHaveTextContent(
+        `Withdrawn on ${dateFormatter.format(new Date(installment.due_date))}`,
+      );
+      expect(cells[3]).toHaveTextContent(new RegExp(installment.state, 'i'));
     });
-    screen.getByText('Use another credit card during payment');
 
-    /**
-     * Make sure the total is the correct one.
-     */
     const $totalAmount = screen.getByTestId('sale-tunnel__total__amount');
     expect($totalAmount).toHaveTextContent(
       'Total' +
@@ -246,34 +266,82 @@ describe('SaleTunnel', () => {
     );
 
     /**
-     * Pay
+     * Subscribe
      */
-    const $terms = screen.getByLabelText(
-      'By checking this box, you accept the General Terms of Sale',
-    );
-    await user.click($terms);
-
-    const { payment_info: paymentInfo, ...order } = CredentialOrderWithPaymentFactory().one();
+    const order = CredentialOrderFactory({ state: OrderState.TO_SIGN }).one();
     fetchMock
+      .post('https://joanie.endpoint/api/v1.0/orders/', order)
       .get(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
         [order],
         { overwriteRoutes: true },
-      )
-      .post('https://joanie.endpoint/api/v1.0/orders/', order)
-      .patch(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit/`, {
-        paymentInfo,
-      })
-      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, {
-        ...order,
-      });
+      );
 
     const $button = screen.getByRole('button', {
-      name: `Pay ${priceFormatter(product.price_currency, product.price)}`,
+      name: `Subscribe`,
     }) as HTMLButtonElement;
     await user.click($button);
 
-    await screen.findByText('Payment in progress');
+    order.state = OrderState.TO_SAVE_PAYMENT_METHOD;
+    order.contract = ContractFactory({ student_signed_on: new Date().toISOString() }).one();
+
+    const checkSignatureDeferred = new Deferred();
+
+    fetchMock
+      .post(`https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`, {
+        invitation_link: 'https://dummysignaturebackend.fr/contract/1/sign',
+      })
+      .post(`https://joanie.endpoint/api/v1.0/signature/notifications/`, 200)
+      .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, checkSignatureDeferred.promise, {
+        overwriteRoutes: true,
+      })
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [order],
+        { overwriteRoutes: true },
+      );
+
+    const $signButton = await screen.findByRole('button', { name: 'Sign' });
+    await user.click($signButton);
+
+    screen.getByRole('heading', { name: 'Signing the contract ...' });
+
+    // Then the signature check polling should be started
+    await screen.findByRole('heading', { name: 'Verifying signature ...' });
+    expect(
+      screen.getByText(
+        'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',
+      ),
+    ).toBeInTheDocument();
+    expect(screen.getByRole('status')).toBeInTheDocument();
+
+    await act(async () => {
+      checkSignatureDeferred.resolve(order);
+    });
+
+    /**
+     * Save payment method step
+     */
+    const paymentMethod = CreditCardFactory().one();
+    order.state = OrderState.PENDING;
+    order.credit_card_id = paymentMethod.id;
+    fetchMock
+      .post('https://joanie.endpoint/api/v1.0/credit-cards/tokenize-card/', PaymentFactory().one())
+      .post(`https://joanie.endpoint/api/v1.0/orders/${order.id}/payment-method/`, 200)
+      .get('https://joanie.endpoint/api/v1.0/credit-cards/', [paymentMethod], {
+        overwriteRoutes: true,
+      })
+      .get(
+        `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
+        [order],
+        { overwriteRoutes: true },
+      );
+    await screen.findByRole('heading', { name: 'Define a payment method' });
+    screen.getByText('Use another credit card');
+
+    const $defineButton = screen.getByRole('button', { name: 'Define' });
+    await user.click($defineButton);
+
     screen.getByText('Payment interface component');
     await user.click(screen.getByTestId('payment-success'));
 
@@ -282,11 +350,9 @@ describe('SaleTunnel', () => {
      */
 
     // Make sure the success step is shown.
-    expect(screen.queryByTestId('generic-sale-tunnel-payment-step')).not.toBeInTheDocument();
     await screen.findByTestId('generic-sale-tunnel-success-step');
-    screen.getByText('Congratulations!');
-    screen.getByText(/Your order has been successfully created/);
-    screen.getByRole('link', { name: 'Sign the training contract' });
+    screen.getByText('Subscription confirmed!');
+    screen.getByRole('link', { name: 'Close' });
 
     /**
      * Make sure the product is displayed as bought ( it verifies cache is well updated ).