richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/{widgets/CourseProductItem/components → components}/PaymentButton/index.tsx

@@ -1,17 +1,20 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { useOrders } from 'hooks/useOrders';
 import { PAYMENT_SETTINGS } from 'settings';
 import type * as Joanie from 'types/Joanie';
-import { OrderState } from 'types/Joanie';
+import { OrderCreationPayload, OrderState, ProductType } from 'types/Joanie';
 import type { Nullable } from 'types/utils';
 import { HttpError } from 'utils/errors/HttpError';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
 import { CourseProductEvent } from 'types/web-analytics';
-import { useCourseProduct } from '../../contexts/CourseProductContext';
-import PaymentInterface from '../PaymentInterfaces';
+import { useTerms } from 'components/PaymentButton/hooks/useTerms';
+import { useSaleTunnelContext } from 'components/SaleTunnel/context';
+import { ObjectHelper } from 'utils/ObjectHelper';
+import { useOrders } from 'hooks/useOrders';
+import PaymentInterface from './components/PaymentInterfaces';
 
 const messages = defineMessages({
   errorAbort: {
@@ -40,6 +43,11 @@ const messages = defineMessages({
     description: "Error message shown when the user didn't select a billing address.",
     id: 'components.PaymentButton.errorAddress',
   },
+  errorTerms: {
+    defaultMessage: 'You must accept the terms.',
+    description: "Error message shown when the user didn't check the terms checkbox.",
+    id: 'components.PaymentButton.errorTerms',
+  },
   pay: {
     defaultMessage: 'Pay {price}',
     description: 'CTA label to proceed to the payment of the product',
@@ -63,17 +71,17 @@ export enum PaymentErrorMessageId {
   ERROR_ADDRESS = 'errorAddress',
   ERROR_DEFAULT = 'errorDefault',
   ERROR_FULL_PRODUCT = 'errorFullProduct',
+  ERROR_TERMS = 'errorTerms',
 }
 
 interface PaymentButtonProps {
-  product: Joanie.Product;
   billingAddress?: Joanie.Address;
   creditCard?: Nullable<Joanie.CreditCard['id']>;
   onSuccess: () => void;
 }
 
 type PaymentInfo = Joanie.Payment & { order_id: string };
-type OneClickPaymentInfo = Joanie.PaymentOneClick & { order_id: string };
+export type OneClickPaymentInfo = Joanie.PaymentOneClick & { order_id: string };
 
 enum ComponentStates {
   IDLE = 'idle',
@@ -86,21 +94,29 @@ enum ComponentStates {
  * First it creates the payment from Joanie then displays the payment interface
  * or the error message.
  */
-const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: PaymentButtonProps) => {
+const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonProps) => {
   const intl = useIntl();
   const API = useJoanieApi();
   const timeoutRef = useRef<NodeJS.Timeout>();
-  const { courseCode, key } = useCourseProduct();
-  const orderManager = useOrders();
-
-  const isReadyToPay = useMemo(() => {
-    return courseCode && product.id && billingAddress;
-  }, [product, courseCode, billingAddress]);
-
+  const { course, key, enrollment, product, order, orderGroup } = useSaleTunnelContext();
+  const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [payment, setPayment] = useState<PaymentInfo | OneClickPaymentInfo>();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
   const [error, setError] = useState<PaymentErrorMessageId>(PaymentErrorMessageId.ERROR_DEFAULT);
 
+  const { validateTerms, termsAccepted, renderTermsCheckbox } = useTerms({
+    product,
+    error,
+    onError: (e) => {
+      setError(e);
+      setState(ComponentStates.ERROR);
+    },
+  });
+
+  const isReadyToPay = useMemo(() => {
+    return (course || enrollment) && product && billingAddress && termsAccepted;
+  }, [product, course, enrollment, billingAddress, termsAccepted]);
+
   /**
    * Use Joanie API to retrieve an order and check if it's state is validated
    *
@@ -108,15 +124,11 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
    * @returns {Promise<boolean>} - Promise resolving to true if order is validated
    */
   const isOrderValidated = async (id: string): Promise<Boolean> => {
-    const order = await API.user.orders.get({ id });
-    return order?.state === OrderState.VALIDATED;
+    const orderToCheck = await API.user.orders.get({ id });
+    return orderToCheck?.state === OrderState.VALIDATED;
   };
 
-  /** type guard to check if the payment is a payment one click */
-  const isOneClickPayment = (p: typeof payment): p is OneClickPaymentInfo =>
-    (p as OneClickPaymentInfo)?.is_paid === true;
-
-  const createPayment = async () => {
+  const createPayment = async (orderId: string) => {
     WebAnalyticsAPIHandler()?.sendCourseProductEvent(CourseProductEvent.PAYMENT_CREATION, key);
 
     if (!billingAddress) {
@@ -124,23 +136,26 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
       setState(ComponentStates.ERROR);
     }
 
+    validateTerms();
+
     if (isReadyToPay) {
       setState(ComponentStates.LOADING);
       let paymentInfos = payment;
 
       if (!paymentInfos) {
-        orderManager.methods.create(
+        const billingAddressPayload = ObjectHelper.omit(billingAddress!, 'id', 'is_main');
+
+        orderMethods.submit(
           {
-            billing_address: billingAddress!,
+            id: orderId,
+            billing_address: billingAddressPayload,
             ...(creditCard && { credit_card_id: creditCard }),
-            course: courseCode,
-            product: product.id,
           },
           {
-            onSuccess: (order) => {
+            onSuccess: (orderPayment) => {
               paymentInfos = {
-                ...order.payment_info,
-                order_id: order.id,
+                ...orderPayment.payment_info,
+                order_id: orderId,
               };
               setPayment(paymentInfos);
             },
@@ -159,13 +174,55 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
     }
   };
 
+  const createOrder = async () => {
+    if (!billingAddress) {
+      setError(PaymentErrorMessageId.ERROR_ADDRESS);
+      setState(ComponentStates.ERROR);
+    }
+
+    validateTerms();
+
+    if (!isReadyToPay) {
+      return;
+    }
+
+    setState(ComponentStates.LOADING);
+
+    if (order) {
+      createPayment(order.id);
+    } else {
+      const payload: OrderCreationPayload =
+        product.type === ProductType.CERTIFICATE
+          ? {
+              product_id: product.id,
+              enrollment_id: enrollment!.id,
+              has_consent_to_terms: termsAccepted,
+            }
+          : {
+              product_id: product.id,
+              course_code: course!.code,
+              has_consent_to_terms: termsAccepted,
+              ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
+            };
+
+      orderMethods.create(payload, {
+        onSuccess: (newOrder) => {
+          createPayment(newOrder.id);
+        },
+        onError: async () => {
+          setState(ComponentStates.ERROR);
+        },
+      });
+    }
+  };
+
   const handleSuccess = () => {
     let round = 0;
 
     const checkOrderValidity = async () => {
       if (round >= PAYMENT_SETTINGS.pollLimit) {
         timeoutRef.current = undefined;
-        orderManager.methods.abort({ id: payment!.order_id, payment_id: payment!.payment_id });
+        orderMethods.abort({ id: payment!.order_id, payment_id: payment!.payment_id });
         setState(ComponentStates.ERROR);
       } else {
         const isValidated = await isOrderValidated(payment!.order_id);
@@ -189,15 +246,11 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
   };
 
   useEffect(() => {
-    if (isOneClickPayment(payment) && state === ComponentStates.LOADING) {
-      handleSuccess();
-    }
-
     return () => {
       if (timeoutRef.current !== undefined) {
         clearTimeout(timeoutRef.current);
         if (payment) {
-          orderManager.methods.abort({
+          orderMethods.abort({
             id: payment.order_id,
             payment_id: payment.payment_id,
           });
@@ -208,7 +261,7 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
 
   useEffect(() => {
     if (error === PaymentErrorMessageId.ERROR_ABORTING) {
-      orderManager.methods
+      orderMethods
         .abort({
           id: payment!.order_id,
           payment_id: payment!.payment_id,
@@ -227,11 +280,11 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
   }, [state]);
 
   return (
-    <div className="payment-button">
-      <button
-        className="button button-sale--primary"
+    <div className="payment-button" data-testid={order && 'payment-button-order-loaded'}>
+      {renderTermsCheckbox()}
+      <Button
         disabled={state === ComponentStates.LOADING}
-        onClick={createPayment}
+        onClick={createOrder}
         {...(state === ComponentStates.ERROR && {
           'aria-describedby': 'sale-tunnel-payment-error',
         })}
@@ -253,8 +306,8 @@ const PaymentButton = ({ product, billingAddress, creditCard, onSuccess }: Payme
             }}
           />
         )}
-      </button>
-      {state === ComponentStates.LOADING && payment && !isOneClickPayment(payment) && (
+      </Button>
+      {state === ComponentStates.LOADING && payment && (
         <PaymentInterface {...payment} onError={handleError} onSuccess={handleSuccess} />
       )}
       <p className="payment-button__error" id="sale-tunnel-payment-error" tabIndex={-1}>

package/js/components/PurchaseButton/index.spec.tsx

@@ -0,0 +1,377 @@
+import { render, screen } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { IntlProvider } from 'react-intl';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import userEvent from '@testing-library/user-event';
+import {
+  CourseStateFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
+import {
+  CertificateProductFactory,
+  CourseLightFactory,
+  EnrollmentFactory,
+  ProductFactory,
+} from 'utils/test/factories/joanie';
+import { SessionProvider } from 'contexts/SessionContext';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ProductType } from 'types/Joanie';
+import { Priority } from 'types';
+import PurchaseButton from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe('PurchaseButton', () => {
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  const Wrapper = ({ client, children }: React.PropsWithChildren<{ client: QueryClient }>) => (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={client}>
+        <SessionProvider>{children}</SessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+
+  it('shows a login button if user is not authenticated', async () => {
+    const product = ProductFactory().one();
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: null })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    expect(
+      await screen.findByRole('button', { name: `Login to purchase "${product.title}"` }),
+    ).toBeInTheDocument();
+  });
+
+  it('shows cta to open sale tunnel when user is authenticated', async () => {
+    const product = ProductFactory().one();
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    fetchMock.resetHistory();
+
+    // Only CTA is displayed
+    const button = await screen.findByRole('button', { name: product.call_to_action });
+
+    // - SaleTunnel should not be opened
+    expect(screen.queryByTestId('SaleTunnel__modal')).toBeNull();
+
+    await userEvent.click(button);
+
+    // - SaleTunnel should have been opened
+    expect(screen.getByTestId('SaleTunnel__modal')).toBeInTheDocument();
+  });
+
+  it('shows cta to open sale tunnel when remaining orders is null', async () => {
+    const product = ProductFactory({ remaining_order_count: null }).one();
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    fetchMock.resetHistory();
+
+    // Only CTA is displayed
+    const button = await screen.findByRole('button', { name: product.call_to_action });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toBeDisabled();
+
+    // - SaleTunnel should not be opened
+    expect(screen.queryByTestId('SaleTunnel__modal')).not.toBeInTheDocument();
+
+    await userEvent.click(button);
+
+    // - SaleTunnel should have been opened
+    expect(await screen.findByTestId('SaleTunnel__modal')).toBeInTheDocument();
+  });
+
+  it('shows cta to open sale tunnel when remaining orders is undefined', async () => {
+    const product = ProductFactory().one();
+    delete product.remaining_order_count;
+
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    fetchMock.resetHistory();
+
+    // Only CTA is displayed
+    const button = await screen.findByRole('button', { name: product.call_to_action });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toBeDisabled();
+
+    // - SaleTunnel should not be opened
+    expect(screen.queryByTestId('SaleTunnel__modal')).not.toBeInTheDocument();
+
+    await userEvent.click(button);
+
+    // - SaleTunnel should have been opened
+    expect(await screen.findByTestId('SaleTunnel__modal')).toBeInTheDocument();
+  });
+
+  it('renders a disabled CTA if the product have no remaining orders', async () => {
+    const product = ProductFactory({ remaining_order_count: 0 }).one();
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    // CTA is displayed but disabled
+    const button: HTMLButtonElement = await screen.findByRole('button', {
+      name: product.call_to_action,
+    });
+    expect(button).toBeDisabled();
+
+    // Further, a message is displayed to explain why the CTA is disabled
+    screen.findByText('This product is full, is currently not available for sale');
+  });
+
+  it.each([
+    { label: 'Product credential', productData: {} },
+    {
+      label: 'Product credential without remaining orders',
+      productData: { remaining_order_count: 0 },
+    },
+  ])(
+    'renders a disabled CTA if one target course has no course runs. Case "$label"',
+    async ({ productData }) => {
+      const product = ProductFactory({ ...productData, type: ProductType.CREDENTIAL }).one();
+      product.target_courses[0].course_runs = [];
+      fetchMock
+        .get('https://joanie.test/api/v1.0/addresses/', [])
+        .get('https://joanie.test/api/v1.0/credit-cards/', [])
+        .get('https://joanie.test/api/v1.0/orders/', []);
+
+      render(
+        <Wrapper client={createTestQueryClient({ user: true })}>
+          <PurchaseButton
+            product={product}
+            disabled={false}
+            course={CourseLightFactory({ code: '00000' }).one()}
+          />
+        </Wrapper>,
+      );
+
+      // CTA is displayed but disabled
+      const button: HTMLButtonElement = await screen.findByRole('button', {
+        name: product.call_to_action,
+      });
+      expect(button).toBeDisabled();
+
+      // Further, a message is displayed to explain why the CTA is disabled
+      expect(
+        await screen.findByText(
+          'At least one course has no course runs. This product is not currently available for sale.',
+        ),
+      ).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    {
+      label: 'state: ARCHIVED_CLOSED',
+      courseRunStateData: { priority: Priority.ARCHIVED_CLOSED },
+    },
+    {
+      label: 'state: ARCHIVED_OPEN',
+      courseRunStateData: { priority: Priority.ARCHIVED_OPEN },
+    },
+    {
+      label: 'state: TO_BE_SCHEDULED',
+      courseRunStateData: { priority: Priority.TO_BE_SCHEDULED },
+    },
+  ])(
+    'renders a disabled CTA for product certificate if the linked course run is not open',
+    async ({ courseRunStateData }) => {
+      const product = CertificateProductFactory().one();
+      const enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
+      fetchMock
+        .get('https://joanie.test/api/v1.0/addresses/', [])
+        .get('https://joanie.test/api/v1.0/credit-cards/', [])
+        .get('https://joanie.test/api/v1.0/orders/', []);
+
+      render(
+        <Wrapper client={createTestQueryClient({ user: true })}>
+          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+        </Wrapper>,
+      );
+
+      // CTA is displayed but disabled
+      const button: HTMLButtonElement = await screen.findByRole('button', {
+        name: product.call_to_action,
+      });
+      expect(button).toBeDisabled();
+
+      // Further, a message is displayed to explain why the CTA is disabled
+      expect(
+        screen.getByText(
+          'The course run is not active. This product is not currently available for sale.',
+        ),
+      ).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    {
+      label: 'state: ONGOING_OPEN',
+      courseRunStateData: { priority: Priority.ONGOING_OPEN },
+    },
+    {
+      label: 'state: FUTURE_OPEN',
+      courseRunStateData: { priority: Priority.FUTURE_OPEN },
+    },
+    {
+      label: 'state: FUTURE_NOT_YET_OPEN',
+      courseRunStateData: { priority: Priority.FUTURE_NOT_YET_OPEN },
+    },
+    {
+      label: 'state: FUTURE_CLOSED',
+      courseRunStateData: { priority: Priority.FUTURE_CLOSED },
+    },
+    {
+      label: 'state: ONGOING_CLOSED',
+      courseRunStateData: { priority: Priority.ONGOING_CLOSED },
+    },
+  ])(
+    'do not renders a disabled CTA for product certificate if the linked course run is open',
+    async ({ courseRunStateData }) => {
+      const product = CertificateProductFactory().one();
+      const enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state = CourseStateFactory(courseRunStateData).one();
+
+      fetchMock
+        .get('https://joanie.test/api/v1.0/addresses/', [])
+        .get('https://joanie.test/api/v1.0/credit-cards/', [])
+        .get('https://joanie.test/api/v1.0/orders/', []);
+
+      render(
+        <Wrapper client={createTestQueryClient({ user: true })}>
+          <PurchaseButton product={product} disabled={false} enrollment={enrollment} />
+        </Wrapper>,
+      );
+
+      // CTA should not be disabled
+      const button: HTMLButtonElement = await screen.findByRole('button', {
+        name: product.call_to_action,
+      });
+      expect(button).not.toBeDisabled();
+
+      // No alert message
+      expect(
+        screen.queryByText(
+          'The course run is not active, this product is not currently available for sale',
+        ),
+      ).not.toBeInTheDocument();
+    },
+  );
+
+  it('renders a disabled CTA if product has no target courses', async () => {
+    const product = ProductFactory().one();
+    product.target_courses = [];
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={false}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    // CTA is displayed but disabled
+    const button: HTMLButtonElement = await screen.findByRole('button', {
+      name: product.call_to_action,
+    });
+    expect(button).toBeDisabled();
+
+    // Further, a message is displayed to explain why the CTA is disabled
+    screen.findByText(
+      'At least one course has no course runs, this product is not currently available for sale',
+    );
+  });
+
+  it('does not render CTA if disabled property is false', async () => {
+    const product = ProductFactory().one();
+    fetchMock
+      .get('https://joanie.test/api/v1.0/addresses/', [])
+      .get('https://joanie.test/api/v1.0/credit-cards/', [])
+      .get('https://joanie.test/api/v1.0/orders/', []);
+
+    render(
+      <Wrapper client={createTestQueryClient({ user: true })}>
+        <PurchaseButton
+          product={product}
+          disabled={true}
+          course={CourseLightFactory({ code: '00000' }).one()}
+        />
+      </Wrapper>,
+    );
+
+    // CTA is not displayed
+    expect(screen.queryByRole('button', { name: product.call_to_action })).not.toBeInTheDocument();
+  });
+});

package/js/components/PurchaseButton/index.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProductFactory } from 'utils/test/factories/joanie';
+import PurchaseButton from '.';
+
+export default {
+  component: PurchaseButton,
+  render: (args) => <PurchaseButton {...args} />,
+  args: {
+    product: ProductFactory().one(),
+  },
+} as Meta<typeof PurchaseButton>;
+
+type Story = StoryObj<typeof PurchaseButton>;
+
+export const Default: Story = {};