richie-education 2.25.0-b2.dev78 → 2.25.0-b2.dev80

package/js/api/joanie.ts

@@ -306,7 +306,7 @@ const API = (): Joanie.API => {
       },
       orders: {
         abort: async ({ id, payment_id }) => {
-          fetchWithJWT(ROUTES.user.orders.abort.replace(':id', id), {
+          return fetchWithJWT(ROUTES.user.orders.abort.replace(':id', id), {
             method: 'POST',
             body: payment_id ? JSON.stringify({ payment_id }) : undefined,
           }).then(checkStatus);

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

@@ -1,6 +1,6 @@
 import { act, cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
-import { PropsWithChildren, useMemo, useState } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 import { IntlProvider } from 'react-intl';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { faker } from '@faker-js/faker';
@@ -25,7 +25,6 @@ import {
   OrderCredentialCreationPayload,
   OrderState,
   ProductType,
-  Order,
   OrderGroup,
   CertificateProduct,
   CredentialProduct,
@@ -42,6 +41,7 @@ import {
   SaleTunnelCertificateContext,
 } from 'components/SaleTunnel/context';
 import { ObjectHelper } from 'utils/ObjectHelper';
+import useProductOrder from 'hooks/useProductOrder';
 import PaymentButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -62,6 +62,12 @@ jest.mock('utils/context', () => ({
 
 jest.mock('./components/PaymentInterfaces');
 
+type WrapperProps = PropsWithChildren<{
+  client?: QueryClient;
+  product: CredentialProduct | CertificateProduct;
+  orderGroup?: OrderGroup;
+}>;
+
 describe.each([
   {
     productType: ProductType.CREDENTIAL,
@@ -88,24 +94,22 @@ describe.each([
         style: 'currency',
       }).format(price);
 
-    const Wrapper = ({
-      client = createTestQueryClient({ user: true }),
-      children,
+    const SaleTunnelWrapper = ({
       product,
       orderGroup,
-    }: PropsWithChildren<{
-      client?: QueryClient;
-      product: CredentialProduct | CertificateProduct;
-      orderGroup?: OrderGroup;
-    }>) => {
-      const [order, setOrder] = useState<Maybe<Order>>();
+      children,
+    }: Exclude<WrapperProps, 'client'>) => {
+      const { item: order } = useProductOrder({
+        courseCode: product.type === ProductType.CREDENTIAL ? TEST_COURSE_CODE : undefined,
+        enrollmentId: product.type === ProductType.CERTIFICATE ? TEST_ENROLLMENT_ID : undefined,
+        productId: product.id,
+      });
 
       const context: SaleTunnelContextType = useMemo(() => {
         if (product.type === ProductType.CREDENTIAL) {
           return {
             product,
             order,
-            setOrder,
             key: `${TEST_COURSE_CODE}+${product.id}`,
             course: CourseLightFactory({ code: TEST_COURSE_CODE }).one(),
             orderGroup,
@@ -114,19 +118,25 @@ describe.each([
           return {
             product,
             order,
-            setOrder,
             key: `${TEST_ENROLLMENT_ID}+${product.id}`,
             enrollment: EnrollmentFactory({ id: TEST_ENROLLMENT_ID }).one(),
             orderGroup,
           } as SaleTunnelCertificateContext;
         }
-      }, [product, order, setOrder, orderGroup]);
+      }, [product, order, orderGroup]);
+
+      return <SaleTunnelContext.Provider value={context}>{children}</SaleTunnelContext.Provider>;
+    };
 
+    const Wrapper = ({
+      client = createTestQueryClient({ user: true }),
+      ...props
+    }: WrapperProps) => {
       return (
         <IntlProvider locale="en">
           <QueryClientProvider client={client}>
             <JoanieSessionProvider>
-              <SaleTunnelContext.Provider value={context}>{children}</SaleTunnelContext.Provider>
+              <SaleTunnelWrapper {...props} />
             </JoanieSessionProvider>
           </QueryClientProvider>
         </IntlProvider>
@@ -332,7 +342,7 @@ describe.each([
           <PaymentButton billingAddress={billingAddress} onSuccess={handleSuccess} />
         </Wrapper>,
       );
-      nbApiCalls += 1; // fetch order for useProductOrder
+      nbApiCalls += 1; // useProductOrder call.
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
       const $terms = screen.getByLabelText(
@@ -356,8 +366,7 @@ describe.each([
 
       // - Route to create order should have been called
       nbApiCalls += 1; // order post create (invalidate queries)
-      nbApiCalls += 1; // refetch omniscient orders
-      nbApiCalls += 1; // refetch useProductOrder
+      nbApiCalls += 1; // useProductOrder call (invalidate from create)
       nbApiCalls += 1; // order submit
 
       await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
@@ -410,6 +419,126 @@ describe.each([
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
     });
 
+    it('should create an order only the first time the payment interface is shown, and not after aborting', async () => {
+      const product: Joanie.Product = ProductFactory().one();
+      const billingAddress: Joanie.Address = AddressFactory().one();
+      const handleSuccess = jest.fn();
+      const { payment_info: paymentInfo, ...order } = OrderWithPaymentFactory().one();
+
+      const fetchOrderQueryParams =
+        product.type === ProductType.CREDENTIAL
+          ? {
+              course_code: TEST_COURSE_CODE,
+              product_id: product.id,
+              state: ['pending', 'validated', 'submitted'],
+            }
+          : {
+              enrollment_id: TEST_ENROLLMENT_ID,
+              product_id: product.id,
+              state: ['pending', 'validated', 'submitted'],
+            };
+
+      fetchMock
+        .get(
+          `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
+          [],
+        )
+        .post('https://joanie.test/api/v1.0/orders/', order)
+        .patch(`https://joanie.test/api/v1.0/orders/${order.id}/submit/`, {
+          paymentInfo,
+        })
+        .get(`https://joanie.test/api/v1.0/orders/${order.id}/`, {
+          ...order,
+        })
+        .post(`https://joanie.test/api/v1.0/orders/${order.id}/abort/`, HttpStatusCode.OK);
+
+      render(
+        <Wrapper client={createTestQueryClient({ user: true })} product={product}>
+          <PaymentButton billingAddress={billingAddress} onSuccess={handleSuccess} />
+        </Wrapper>,
+      );
+      nbApiCalls += 1; // useProductOrder call.
+      expect(fetchMock.calls()).toHaveLength(nbApiCalls);
+
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
+      await act(async () => {
+        fireEvent.click($terms);
+      });
+
+      const $button = screen.getByRole('button', {
+        name: `Pay ${formatPrice(product.price, product.price_currency)}`,
+      }) as HTMLButtonElement;
+
+      // - Payment button should not be disabled.
+      expect($button.disabled).toBe(false);
+
+      // - User clicks on pay button
+      await act(async () => {
+        fireEvent.click($button);
+      });
+
+      // - Route to create order should have been called
+      nbApiCalls += 1; // order post create (invalidate queries)
+      nbApiCalls += 1; // useProductOrder call (invalidate from create)
+      nbApiCalls += 1; // order submit
+
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+      expect(fetchMock.lastUrl()).toBe(`https://joanie.test/api/v1.0/orders/${order.id}/submit/`);
+
+      // - Spinner should be displayed
+      screen.getByText('Payment in progress');
+
+      // - Payment interface should be displayed
+      screen.getByText('Payment interface component');
+
+      // - Simulate the payment aborting.
+      fetchMock.get(
+        `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
+        [
+          {
+            ...order,
+            state: OrderState.PENDING,
+          },
+        ],
+        { overwriteRoutes: true },
+      );
+      await act(async () => {
+        fireEvent.click(screen.getByTestId('payment-abort'));
+      });
+
+      nbApiCalls += 1; // abort order.
+      nbApiCalls += 1; // useProductOrder call (invalidate from create)
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+      expect(fetchMock.calls()[fetchMock.calls().length - 2][0]).toBe(
+        `https://joanie.test/api/v1.0/orders/${order.id}/abort/`,
+      );
+      expect(fetchMock.calls()[fetchMock.calls().length - 1][0]).toBe(
+        `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
+      );
+
+      screen.getByText('You have aborted the payment.');
+
+      // screen.logTestingPlaygroundURL();
+
+      // - User clicks on pay button again.
+      await act(async () => {
+        fireEvent.click($button);
+      });
+
+      // - Spinner should be displayed
+      screen.getByText('Payment in progress');
+
+      // - Payment interface should be displayed
+      screen.getByText('Payment interface component');
+
+      // - Now we make sure the order is not created again and just submitted.
+      nbApiCalls += 1; // submits order.
+      await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));
+      expect(fetchMock.lastUrl()).toBe(`https://joanie.test/api/v1.0/orders/${order.id}/submit/`);
+    });
+
     it('should render a payment button and not call the order creation route', async () => {
       const product: Joanie.Product = ProductFactory().one();
       const billingAddress: Joanie.Address = AddressFactory().one();
@@ -655,8 +784,9 @@ describe.each([
 
       await waitFor(
         async () => {
-          expect(fetchMock.calls()).toHaveLength(PAYMENT_SETTINGS.pollLimit);
-          expect(fetchMock.lastUrl()).toBe(
+          // +1 is for useProductOrder call invalidation.
+          expect(fetchMock.calls()).toHaveLength(PAYMENT_SETTINGS.pollLimit + 1);
+          expect(fetchMock.calls()[fetchMock.calls().length - 2][0]).toBe(
             `https://joanie.test/api/v1.0/orders/${order.id}/abort/`,
           );
         },
@@ -665,7 +795,9 @@ describe.each([
         },
       );
 
-      expect(JSON.parse(fetchMock.lastOptions()!.body!.toString())).toEqual({
+      expect(
+        JSON.parse(fetchMock.calls()[fetchMock.calls().length - 2][1]!.body!.toString()),
+      ).toEqual({
         payment_id: paymentInfo.payment_id,
       });
 
@@ -735,7 +867,6 @@ describe.each([
 
       // - Route to create order should have been called
       nbApiCalls += 1; // order post create (invalidate queries)
-      nbApiCalls += 1; // refetch omniscient orders
       nbApiCalls += 1; // refetch useProductOrder
       nbApiCalls += 1; // order submit
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);

package/js/components/PaymentButton/index.tsx

@@ -3,7 +3,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import { useJoanieApi } from 'contexts/JoanieApiContext';
-import { useOmniscientOrders } from 'hooks/useOrders';
 import { PAYMENT_SETTINGS } from 'settings';
 import type * as Joanie from 'types/Joanie';
 import { OrderCreationPayload, OrderState, ProductType } from 'types/Joanie';
@@ -11,10 +10,10 @@ 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 useProductOrder from 'hooks/useProductOrder';
 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({
@@ -99,13 +98,8 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
   const intl = useIntl();
   const API = useJoanieApi();
   const timeoutRef = useRef<NodeJS.Timeout>();
-  const { course, key, enrollment, product, setOrder, orderGroup } = useSaleTunnelContext();
-  const { item: order } = useProductOrder({
-    courseCode: course?.code,
-    enrollmentId: enrollment?.id,
-    productId: product.id,
-  });
-  const orderManager = useOmniscientOrders();
+  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);
@@ -156,7 +150,7 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
       if (!paymentInfos) {
         const billingAddressPayload = ObjectHelper.omit(billingAddress!, 'id', 'is_main');
 
-        orderManager.methods.submit(
+        orderMethods.submit(
           {
             id: orderId,
             billing_address: billingAddressPayload,
@@ -214,9 +208,8 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
               ...(orderGroup ? { order_group_id: orderGroup.id } : {}),
             };
 
-      orderManager.methods.create(payload, {
+      orderMethods.create(payload, {
         onSuccess: (newOrder) => {
-          setOrder(newOrder);
           createPayment(newOrder.id);
         },
         onError: async () => {
@@ -232,7 +225,7 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
     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);
@@ -260,7 +253,7 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
       if (timeoutRef.current !== undefined) {
         clearTimeout(timeoutRef.current);
         if (payment) {
-          orderManager.methods.abort({
+          orderMethods.abort({
             id: payment.order_id,
             payment_id: payment.payment_id,
           });
@@ -271,7 +264,7 @@ const PaymentButton = ({ billingAddress, creditCard, onSuccess }: PaymentButtonP
 
   useEffect(() => {
     if (error === PaymentErrorMessageId.ERROR_ABORTING) {
-      orderManager.methods
+      orderMethods
         .abort({
           id: payment!.order_id,
           payment_id: payment!.payment_id,

package/js/components/SaleTunnel/components/SaleTunnelStepResume/index.spec.tsx

@@ -6,7 +6,6 @@ import {
   ProductFactory,
 } from 'utils/test/factories/joanie';
 import { SaleTunnelContext } from 'components/SaleTunnel/context';
-import { noop } from 'utils';
 import { SaleTunnelStepResume } from '.';
 
 describe('SaleTunnelStepResume', () => {
@@ -24,7 +23,6 @@ describe('SaleTunnelStepResume', () => {
         <SaleTunnelContext.Provider
           value={{
             product,
-            setOrder: noop,
             course: CourseLightFactory({ code: '00000' }).one(),
             key: `00000+${product.id}`,
           }}
@@ -56,7 +54,6 @@ describe('SaleTunnelStepResume', () => {
           value={{
             product,
             order,
-            setOrder: noop,
             course: CourseLightFactory({ code: '00000' }).one(),
             key: `00000+${product.id}`,
           }}

package/js/components/SaleTunnel/context.tsx

@@ -12,7 +12,6 @@ interface SaleTunnelContextBase {
   product: CredentialProduct | CertificateProduct;
   orderGroup?: OrderGroup;
   order?: Order;
-  setOrder: (order: Order) => void;
   key: string;
   enrollment?: Enrollment;
   course?: CourseLight;

package/js/components/SaleTunnel/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useQueryClient } from '@tanstack/react-query';
 import { Modal } from 'components/Modal';
@@ -16,7 +16,7 @@ import { IconTypeEnum } from 'components/Icon';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
 import { CourseProductEvent } from 'types/web-analytics';
 import { Manifest, useStepManager } from 'hooks/useStepManager';
-import { Maybe } from 'types/utils';
+import useProductOrder from 'hooks/useProductOrder';
 import { SaleTunnelContext, SaleTunnelContextType } from './context';
 import { StepBreadcrumb } from './components/StepBreadcrumb';
 import { SaleTunnelStepValidation } from './components/SaleTunnelStepValidation';
@@ -80,8 +80,11 @@ const SaleTunnel = ({
     product.id
   }`;
   const queryClient = useQueryClient();
-
-  const [order, setOrder] = useState<Maybe<Order>>();
+  const { item: order } = useProductOrder({
+    courseCode: course?.code,
+    enrollmentId: enrollment?.id,
+    productId: product.id,
+  });
 
   const manifest: Manifest<TunnelSteps, 'resume'> = {
     start: 'validation',
@@ -138,7 +141,6 @@ const SaleTunnel = ({
       return {
         product: product as CredentialProduct,
         order,
-        setOrder,
         key,
         course: course!,
         enrollment: undefined,
@@ -147,25 +149,23 @@ const SaleTunnel = ({
       return {
         product: product as CertificateProduct,
         order,
-        setOrder,
         key,
         course: undefined,
         enrollment: enrollment!,
       };
     }
-  }, [product, order, setOrder]);
+  }, [product, order]);
 
   useMemo(
     () => ({
       product,
       order,
-      setOrder,
       key,
       course,
       enrollment,
       orderGroup,
     }),
-    [product, order, setOrder, key, course, enrollment, orderGroup],
+    [product, order, key, course, enrollment, orderGroup],
   );
 
   /**

package/js/hooks/useOrders.ts

@@ -73,7 +73,12 @@ const useOrdersBase =
     queryOptions?: QueryOptions<CredentialOrder | CertificateOrder>,
   ) => {
     const custom = useResourcesCustom({ ...props, filters, queryOptions });
-    const abortHandler = useSessionMutation({ mutationFn: useJoanieApi().user.orders.abort });
+    const abortHandler = useSessionMutation({
+      mutationFn: useJoanieApi().user.orders.abort,
+      onSuccess: () => {
+        custom.methods.invalidate();
+      },
+    });
     const submitHandler = useSessionMutation({ mutationFn: useJoanieApi().user.orders.submit });
     return {
       ...custom,

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

@@ -24,7 +24,7 @@ other {# remaining seats}
 interface CourseProductItemFooterProps {
   course: CourseLight;
   product: CredentialProduct;
-  isPendingState: boolean;
+  canPurchase: boolean;
   orderGroups: OrderGroup[];
   orderGroupsAvailable: OrderGroup[];
 }
@@ -34,14 +34,14 @@ const CourseProductItemFooter = ({
   product,
   orderGroups,
   orderGroupsAvailable,
-  isPendingState,
+  canPurchase,
 }: CourseProductItemFooterProps) => {
   if (orderGroups.length === 0) {
     return (
       <PurchaseButton
         course={course}
         product={product}
-        disabled={!isPendingState}
+        disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
     );
@@ -58,7 +58,7 @@ const CourseProductItemFooter = ({
       <PurchaseButton
         course={course}
         product={product}
-        disabled={!isPendingState}
+        disabled={!canPurchase}
         orderGroup={orderGroup}
         buttonProps={{ fullWidth: true }}
       />

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

@@ -62,11 +62,11 @@ export interface CourseProductItemProps {
 type HeaderProps = {
   compact: boolean;
   hasPurchased: boolean;
-  isPendingState: boolean;
+  canPurchase: boolean;
   order: Maybe<CredentialOrder>;
   product: Product;
 };
-const Header = ({ product, order, hasPurchased, isPendingState, compact }: HeaderProps) => {
+const Header = ({ product, order, hasPurchased, canPurchase, compact }: HeaderProps) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
 
@@ -92,7 +92,7 @@ const Header = ({ product, order, hasPurchased, isPendingState, compact }: Heade
         <strong className="product-widget__price h6">
           {order?.state === OrderState.VALIDATED && <FormattedMessage {...messages.purchased} />}
           {order?.state === OrderState.SUBMITTED && <FormattedMessage {...messages.pending} />}
-          {isPendingState && (
+          {canPurchase && (
             <FormattedNumber
               currency={product.price_currency}
               value={product.price}
@@ -171,7 +171,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
   });
 
   const order = productOrder as CredentialOrder;
-  const isPendingState = !order || order.state === OrderState.PENDING;
+  const canPurchase = !order || order.state === OrderState.PENDING;
   const hasPurchased = (order && order.state === OrderState.VALIDATED) ?? false;
 
   const hasError = Boolean(productQueryStates.error);
@@ -228,7 +228,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
           <Header
             product={product}
             order={order}
-            isPendingState={isPendingState}
+            canPurchase={canPurchase}
             hasPurchased={hasPurchased}
             compact={compact}
           />
@@ -239,7 +239,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
               product={product as CredentialProduct}
               orderGroups={orderGroups}
               orderGroupsAvailable={orderGroupsAvailable}
-              isPendingState={isPendingState}
+              canPurchase={canPurchase}
             />
           </footer>
         </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev78",
+  "version": "2.25.0-b2.dev80",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {