richie-education 2.28.2-dev39 → 2.28.2-dev53

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

@@ -0,0 +1,201 @@
+import { useMemo, useEffect, useState } from 'react';
+import { Alert, Button, VariantType } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { useSaleTunnelContext } from 'components/SaleTunnel/GenericSaleTunnel';
+import { useOrders } from 'hooks/useOrders';
+import { OrderCreationPayload } from 'types/Joanie';
+import { useMatchMediaLg } from 'hooks/useMatchMedia';
+import { SubscriptionErrorMessageId } from 'components/PaymentInterfaces/types';
+import { HttpError } from 'utils/errors/HttpError';
+import { Spinner } from 'components/Spinner';
+
+const messages = defineMessages({
+  subscribe: {
+    id: 'components.SaleTunnel.SubscriptionButton.subscribe',
+    defaultMessage: 'Subscribe',
+    description: 'Label of the button to subscribe to a product.',
+  },
+  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.',
+    description:
+      'Message explaining the subscription process with a training agreement to sign and a payment method to set.',
+  },
+  walkthroughToSign: {
+    id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSign',
+    defaultMessage:
+      'To enroll in the training, you will be invited to sign the training agreement.',
+    description:
+      'Message explaining the subscription process with only a training agreement to sign.',
+  },
+  walkthroughToSavePayment: {
+    id: 'components.SaleTunnel.SubscriptionButton.walkthroughToSavePayment',
+    defaultMessage: 'To enroll in the training, you will be invited to define a payment method.',
+    description: 'Message explaining the subscription process with only a payment method to set.',
+  },
+  errorDefault: {
+    defaultMessage: 'An error occurred during order creation. Please retry later.',
+    description: 'Error message shown when order creation request failed.',
+    id: 'components.SubscriptionButton.errorDefault',
+  },
+  errorFullProduct: {
+    defaultMessage: 'There are no more places available for this product.',
+    description:
+      'Error message shown when order creation request failed because there is no remaining available seat for the product.',
+    id: 'components.SubscriptionButton.errorFullProduct',
+  },
+  errorAddress: {
+    defaultMessage: 'You must have a billing address.',
+    description: "Error message shown when the user didn't select a billing address.",
+    id: 'components.SubscriptionButton.errorAddress',
+  },
+  orderCreationInProgress: {
+    defaultMessage: 'Order creation in progress',
+    description: 'Label for screen reader when an order creation is in progress.',
+    id: 'components.SubscriptionButton.orderCreationInProgress',
+  },
+});
+
+enum ComponentStates {
+  IDLE = 'idle',
+  LOADING = 'loading',
+  ERROR = 'error',
+}
+
+interface Props {
+  buildOrderPayload: (
+    payload: Pick<OrderCreationPayload, 'product_id' | 'billing_address' | 'order_group_id'>,
+  ) => OrderCreationPayload;
+}
+
+const SubscriptionButton = ({ buildOrderPayload }: Props) => {
+  const {
+    order,
+    creditCard,
+    billingAddress,
+    product,
+    nextStep,
+    runSubmitCallbacks,
+    props: saleTunnelProps,
+  } = useSaleTunnelContext();
+  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
+  const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
+  const [error, setError] = useState<SubscriptionErrorMessageId | string>();
+  const isMobile = useMatchMediaLg();
+
+  const handleError = (
+    messageId: SubscriptionErrorMessageId | string = SubscriptionErrorMessageId.ERROR_DEFAULT,
+  ) => {
+    setState(ComponentStates.ERROR);
+    setError(messageId);
+  };
+
+  const createOrder = async () => {
+    setState(ComponentStates.LOADING);
+
+    try {
+      await runSubmitCallbacks();
+    } catch (e) {
+      setState(ComponentStates.IDLE);
+      return;
+    }
+
+    if (!billingAddress) {
+      handleError(SubscriptionErrorMessageId.ERROR_ADDRESS);
+      return;
+    }
+
+    const payload = buildOrderPayload({
+      product_id: product.id,
+      billing_address: billingAddress!,
+      order_group_id: saleTunnelProps.orderGroup?.id,
+    });
+
+    orderMethods.create(payload, {
+      onError: async (createOrderError: HttpError) => {
+        if (createOrderError.responseBody) {
+          const responseErrors = await createOrderError.responseBody;
+          if ('max_validated_orders' in responseErrors) {
+            handleError(SubscriptionErrorMessageId.ERROR_FULL_PRODUCT);
+          }
+        }
+        handleError();
+      },
+    });
+  };
+
+  const walkthroughMessages = useMemo(() => {
+    if (product.contract_definition && product.price > 0) {
+      return messages.walkthroughToSignAndSavePayment;
+    } else if (product.contract_definition && product.price === 0) {
+      return messages.walkthroughToSign;
+    } else if (!product.contract_definition && product.price > 0) {
+      return messages.walkthroughToSavePayment;
+    }
+  }, [product, creditCard]);
+
+  useEffect(() => {
+    if (order) nextStep();
+  }, [order]);
+
+  useEffect(() => {
+    if (error && [ComponentStates.IDLE, ComponentStates.LOADING].includes(state)) {
+      setError(undefined);
+    }
+    if (state === ComponentStates.ERROR) {
+      document.querySelector<HTMLElement>('#sale-tunnel-subscription-error')?.focus();
+    }
+  }, [state]);
+
+  return (
+    <>
+      <div style={{ maxWidth: '680px' }} className="mb-s" data-testid="walkthrough-banner">
+        {walkthroughMessages && (
+          <Alert type={VariantType.INFO}>
+            <FormattedMessage
+              {...walkthroughMessages}
+              values={{ credictCarNumbers: creditCard?.last_numbers }}
+            />
+          </Alert>
+        )}
+      </div>
+      <Button
+        onClick={createOrder}
+        fullWidth={isMobile}
+        disabled={state === ComponentStates.LOADING}
+        {...(state === ComponentStates.ERROR && {
+          'aria-describedby': 'sale-tunnel-payment-error',
+        })}
+      >
+        {state === ComponentStates.LOADING ? (
+          <Spinner theme="light" aria-labelledby="order-creation-in-progress">
+            <span id="order-creation-in-progress">
+              <FormattedMessage {...messages.orderCreationInProgress} />
+            </span>
+          </Spinner>
+        ) : (
+          <FormattedMessage {...messages.subscribe} />
+        )}
+      </Button>
+      {state === ComponentStates.ERROR && (
+        <p className="subscription-button__error" id="sale-tunnel-subscription-error" tabIndex={-1}>
+          {!error || messages.hasOwnProperty(error) ? (
+            <FormattedMessage
+              {...messages[
+                (error as Exclude<
+                  SubscriptionErrorMessageId,
+                  SubscriptionErrorMessageId.ERROR_ABORT
+                >) || SubscriptionErrorMessageId.ERROR_DEFAULT
+              ]}
+            />
+          ) : (
+            error
+          )}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default SubscriptionButton;

package/js/components/SaleTunnel/_styles.scss

@@ -105,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 {

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

package/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';
@@ -86,26 +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(
-        `https://joanie.endpoint/api/v1.0/orders/?course_code=${course.code}&product_id=${product.id}&state=pending&state=validated&state=submitted`,
-        [],
-      )
+      .get(url, [])
       .get(
         `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,
       });
@@ -121,13 +119,6 @@ describe('SaleTunnel / Credential', () => {
       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);
 

package/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,11 +14,14 @@ import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import CourseProductItem from 'widgets/SyllabusCourseRunsList/components/CourseProductItem';
 import {
   AddressFactory,
-  CredentialOrderWithPaymentFactory,
-  PaymentInstallmentFactory,
+  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';
@@ -26,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,
@@ -54,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,
@@ -81,13 +92,14 @@ 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 course = PacedCourseFactory().one();
+    const relation = CourseProductRelationFactory({ course }).one();
     const paymentSchedule = PaymentInstallmentFactory().many(2);
-    const { product, course } = relation;
+    const { product } = relation;
 
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${product.id}/`,
@@ -101,22 +113,16 @@ describe('SaleTunnel', () => {
     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 });
@@ -216,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);
@@ -235,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' +
@@ -252,34 +266,84 @@ 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: `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/',
+        { results: [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'));
 
@@ -288,11 +352,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 ).