richie-education 2.28.2-dev58 → 2.28.2-dev65

package/js/components/CreditCardSelector/index.tsx

@@ -78,7 +78,7 @@ export const CreditCardSelector = ({
   const isMobile = useMatchMediaLg();
 
   const {
-    states: { fetching },
+    states: { fetching, isFetched },
     items: creditCards,
   } = useCreditCardsManagement();
 
@@ -101,7 +101,7 @@ export const CreditCardSelector = ({
 
   return (
     <div className="credit-card-selector">
-      {fetching ? (
+      {!isFetched && fetching ? (
         <Spinner />
       ) : (
         <>

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

@@ -58,7 +58,6 @@ describe('AddressSelector', () => {
           billingAddress,
           setBillingAddress,
           setCreditCard: jest.fn(),
-          onPaymentSuccess: jest.fn(),
           step: SaleTunnelStep.IDLE,
           registerSubmitCallback: jest.fn(),
           unregisterSubmitCallback: jest.fn(),

package/js/components/SaleTunnel/GenericSaleTunnel.tsx

@@ -28,7 +28,6 @@ export interface SaleTunnelContextType {
   webAnalyticsEventKey: string;
 
   // internal
-  onPaymentSuccess: () => void;
   step: SaleTunnelStep;
 
   // meta
@@ -75,16 +74,6 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
     enrollmentId: props.enrollment?.id,
     productId: props.product.id,
   });
-
-  const {
-    methods: { refetch: refetchOmniscientOrders },
-  } = useOmniscientOrders();
-  const {
-    methods: { invalidate: invalidateOrders },
-  } = useOrders(undefined, { enabled: false });
-  const {
-    methods: { invalidate: invalidateEnrollments },
-  } = useEnrollments(undefined, { enabled: false });
   const [billingAddress, setBillingAddress] = useState<Address>();
   const [creditCard, setCreditCard] = useState<CreditCard>();
   const [step, setStep] = useState<SaleTunnelStep>(SaleTunnelStep.IDLE);
@@ -127,19 +116,6 @@ export const GenericSaleTunnel = (props: GenericSaleTunnelProps) => {
       creditCard,
       setCreditCard,
       nextStep,
-      onPaymentSuccess: () => {
-        nextStep();
-        WebAnalyticsAPIHandler()?.sendCourseProductEvent(
-          CourseProductEvent.PAYMENT_SUCCEED,
-          props.eventKey,
-        );
-        // Once the user has completed the purchase, we need to refetch the orders
-        // to update the ordersQuery cache
-        invalidateOrders();
-        refetchOmniscientOrders();
-        invalidateEnrollments();
-        props.onFinish?.(order!);
-      },
       step,
       registerSubmitCallback: (key, callback) => {
         setSubmitCallbacks((prev) => new Map(prev).set(key, callback));
@@ -230,6 +206,34 @@ export const GenericSaleTunnelInitialStep = (props: GenericSaleTunnelProps) => {
 };
 
 export const GenericSaleTunnelSuccessStep = (props: SaleTunnelProps) => {
+  const {
+    webAnalyticsEventKey,
+    props: { onFinish },
+    order,
+  } = useSaleTunnelContext();
+  const {
+    methods: { refetch: refetchOmniscientOrders },
+  } = useOmniscientOrders();
+  const {
+    methods: { invalidate: invalidateOrders },
+  } = useOrders(undefined, { enabled: false });
+  const {
+    methods: { invalidate: invalidateEnrollments },
+  } = useEnrollments(undefined, { enabled: false });
+
+  useEffect(() => {
+    WebAnalyticsAPIHandler()?.sendCourseProductEvent(
+      CourseProductEvent.PAYMENT_SUCCEED,
+      webAnalyticsEventKey,
+    );
+    // Once the user has completed the purchase, we need to refetch the orders
+    // to update the ordersQuery cache
+    invalidateOrders();
+    refetchOmniscientOrders();
+    invalidateEnrollments();
+    onFinish?.(order!);
+  }, []);
+
   return (
     <Modal {...props} size={ModalSize.MEDIUM}>
       <SaleTunnelSuccess closeModal={props.onClose} />

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

@@ -10,7 +10,7 @@ import { Spinner } from 'components/Spinner';
 import PaymentInterfaces from 'components/PaymentInterfaces';
 import { useOrders } from 'hooks/useOrders';
 import { CreditCardSelector } from 'components/CreditCardSelector';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
+import { PAYMENT_SETTINGS } from 'settings';
 
 const messages = defineMessages({
   title: {
@@ -48,11 +48,12 @@ const messages = defineMessages({
 
 const SaleTunnelSavePaymentMethod = () => {
   const initialCreditCards = useRef<CreditCard[]>();
-  const pollingTimeoutRef = useRef<NodeJS.Timeout>();
-  const JoanieApi = useJoanieApi();
+  const [shouldPoll, setShouldPoll] = useState(false);
   const [payment, setPayment] = useState<Payment>();
   const [error, setError] = useState<string>();
-  const creditCards = useCreditCards();
+  const creditCardsQuery = useCreditCards(undefined, {
+    refetchInterval: shouldPoll && PAYMENT_SETTINGS.pollInterval,
+  });
   const orders = useOrders(undefined, { enabled: false });
   const { order, nextStep, creditCard, setCreditCard } = useSaleTunnelContext();
 
@@ -64,23 +65,20 @@ const SaleTunnelSavePaymentMethod = () => {
   };
 
   const tokenizePaymentMethod = async () => {
-    const data = await creditCards.methods.tokenize();
+    const data = await creditCardsQuery.methods.tokenize();
     setPayment(data);
     setError(undefined);
   };
 
-  const waitForNewCreditCard = async () => {
-    const { results } = await JoanieApi.user.creditCards.get();
+  const waitForNewCreditCard = () => {
     const initialIds = initialCreditCards.current!.map((cc) => cc.id);
-    const newCard = results.find((cc) => !initialIds.includes(cc.id));
+    const newCard = creditCardsQuery.items.find((cc) => !initialIds.includes(cc.id));
 
-    if (!newCard) {
-      pollingTimeoutRef.current = setTimeout(waitForNewCreditCard, 1000);
-      return;
-    }
+    if (!newCard) return;
 
     setCreditCard(newCard);
-    await setPaymentMethod(newCard.id);
+    setShouldPoll(false);
+    setPaymentMethod(newCard.id);
   };
 
   const handleError = (message: string = PaymentErrorMessageId.ERROR_DEFAULT) => {
@@ -90,9 +88,11 @@ const SaleTunnelSavePaymentMethod = () => {
 
   useEffect(() => {
     if (!payment) {
-      initialCreditCards.current = creditCards.items;
+      initialCreditCards.current = creditCardsQuery.items;
+    } else {
+      waitForNewCreditCard();
     }
-  }, [creditCards]);
+  }, [creditCardsQuery.items]);
 
   useEffect(() => {
     if (order?.state !== OrderState.TO_SAVE_PAYMENT_METHOD) {
@@ -100,13 +100,6 @@ const SaleTunnelSavePaymentMethod = () => {
     }
   }, [order]);
 
-  useEffect(
-    () => () => {
-      clearTimeout(pollingTimeoutRef.current);
-    },
-    [],
-  );
-
   return (
     <section
       className="sale-tunnel-step sale-tunnel-step--save-payment-method"
@@ -150,7 +143,11 @@ const SaleTunnelSavePaymentMethod = () => {
           </p>
         )}
         {payment && (
-          <PaymentInterfaces {...payment} onSuccess={waitForNewCreditCard} onError={handleError} />
+          <PaymentInterfaces
+            {...payment}
+            onSuccess={() => setShouldPoll(true)}
+            onError={handleError}
+          />
         )}
       </footer>
     </section>

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

@@ -328,11 +328,9 @@ describe('SaleTunnel', () => {
     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/credit-cards/', [paymentMethod], {
+        overwriteRoutes: true,
+      })
       .get(
         `https://joanie.endpoint/api/v1.0/orders/?${queryString.stringify(orderQueryParameters)}`,
         [order],

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

@@ -217,7 +217,6 @@ describe.each([
 
     // - Route to create order should have been called
     nbApiCalls += 1; // order create
-    nbApiCalls += 1; // order get (invalidate queries)
     nbApiCalls += 1; // useProductOrder call (invalidate from create)
 
     await waitFor(() => expect(fetchMock.calls()).toHaveLength(nbApiCalls));

package/js/settings/settings.prod.ts

@@ -31,8 +31,6 @@ export const REACT_QUERY_SETTINGS = {
 export const PAYMENT_SETTINGS = {
   // Interval in ms to poll the related order when a payment has succeeded.
   pollInterval: 1000,
-  // Number of retries
-  pollLimit: 30,
 };
 
 export const CONTRACT_SETTINGS = {

package/js/settings/settings.test.ts

@@ -23,3 +23,8 @@ export const CONTRACT_SETTINGS = {
   // Simulated sign request delay
   dummySignatureSignTimeout: 100,
 };
+
+export const PAYMENT_SETTINGS = {
+  // Interval in ms to poll the related order when a payment has succeeded.
+  pollInterval: 150,
+};

package/js/utils/OrderHelper/index.ts

@@ -6,6 +6,7 @@ import {
   OrderEnrollment,
   OrderState,
   PaymentScheduleState,
+  PURCHASABLE_ORDER_STATES,
 } from 'types/Joanie';
 
 export enum OrderStatus {
@@ -96,4 +97,9 @@ export class OrderHelper {
     if (!order) return false;
     return ACTIVE_ORDER_STATES.includes(order.state);
   }
+
+  static isPurchasable(order?: Order | NestedCourseOrder | OrderEnrollment) {
+    if (!order) return true;
+    return PURCHASABLE_ORDER_STATES.includes(order.state);
+  }
 }

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

@@ -484,7 +484,6 @@ export const SaleTunnelContextFactory = factory(
     billingAddress: undefined,
     setBillingAddress: noop,
     setCreditCard: noop,
-    onPaymentSuccess: noop,
     step: SaleTunnelStep.IDLE,
     registerSubmitCallback: noop,
     unregisterSubmitCallback: noop,

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/ProductCertificateFooter/index.tsx

@@ -2,12 +2,7 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 import { useState } from 'react';
 import PurchaseButton from 'components/PurchaseButton';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import {
-  CertificateProduct,
-  Enrollment,
-  ProductType,
-  PURCHASABLE_ORDER_STATES,
-} from 'types/Joanie';
+import { CertificateProduct, Enrollment, ProductType } from 'types/Joanie';
 import DownloadCertificateButton from 'components/DownloadCertificateButton';
 import { useCertificate } from 'hooks/useCertificates';
 import { isOpenedCourseRunCertificate } from 'utils/CourseRuns';
@@ -65,30 +60,27 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           <FormattedMessage {...messages.buyProductCertificateLabel} />
         )}
       </div>
-      {OrderHelper.isActive(order) ? (
-        order!.certificate_id && (
-          <DownloadCertificateButton
-            className="dashboard-item__button"
-            certificateId={order!.certificate_id}
-          />
-        )
-      ) : (
-        <PurchaseButton
+      {OrderHelper.isActive(order) && order!.certificate_id && (
+        <DownloadCertificateButton
           className="dashboard-item__button"
-          product={product}
-          enrollment={enrollment}
-          buttonProps={{ size: 'small' }}
-          disabled={order && !PURCHASABLE_ORDER_STATES.includes(order.state)}
-          onFinish={(o) => {
-            /**
-             * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
-             * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
-             * update the active order in the enrollment in order to hide the buy button and display the download button.
-             */
-            setOrder(o);
-          }}
+          certificateId={order!.certificate_id}
         />
       )}
+      <PurchaseButton
+        className="dashboard-item__button"
+        product={product}
+        enrollment={enrollment}
+        buttonProps={{ size: 'small' }}
+        disabled={!OrderHelper.isPurchasable(order)}
+        onFinish={(o) => {
+          /**
+           * As we do not refetch enrollments in DashboardCourses after SaleTunnel cache invalidation (to avoid
+           * scroll reset - and SaleTunnel modal unmounting too early caused by list reset) we need to manually
+           * update the active order in the enrollment in order to hide the buy button and display the download button.
+           */
+          setOrder(o);
+        }}
+      />
     </div>
   );
 };

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

@@ -1,7 +1,7 @@
 import { Children, useEffect, useMemo } from 'react';
 import { defineMessages, FormattedMessage, FormattedNumber, useIntl } from 'react-intl';
 import c from 'classnames';
-import { ProductType, Product, CredentialOrder, PURCHASABLE_ORDER_STATES } from 'types/Joanie';
+import { ProductType, Product, CredentialOrder } from 'types/Joanie';
 import { useCourseProduct } from 'hooks/useCourseProducts';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -156,7 +156,7 @@ const CourseProductItem = ({ productId, course, compact = false }: CourseProduct
   });
 
   const order = productOrder as CredentialOrder;
-  const canPurchase = !order || PURCHASABLE_ORDER_STATES.includes(order.state);
+  const canPurchase = OrderHelper.isPurchasable(order);
   const hasPurchased = OrderHelper.isActive(order);
   const canEnroll = OrderHelper.allowEnrollment(order);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.28.2-dev58",
+  "version": "2.28.2-dev65",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -51,20 +51,20 @@
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "2.9.3",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.25.0",
-    "@sentry/types": "8.25.0",
-    "@storybook/addon-actions": "8.2.8",
-    "@storybook/addon-essentials": "8.2.8",
-    "@storybook/addon-interactions": "8.2.8",
-    "@storybook/addon-links": "8.2.8",
-    "@storybook/react": "8.2.8",
-    "@storybook/react-webpack5": "8.2.8",
-    "@storybook/test": "8.2.8",
-    "@tanstack/query-core": "5.51.21",
-    "@tanstack/query-sync-storage-persister": "5.51.21",
-    "@tanstack/react-query": "5.51.23",
-    "@tanstack/react-query-devtools": "5.51.23",
-    "@tanstack/react-query-persist-client": "5.51.23",
+    "@sentry/browser": "8.26.0",
+    "@sentry/types": "8.26.0",
+    "@storybook/addon-actions": "8.2.9",
+    "@storybook/addon-essentials": "8.2.9",
+    "@storybook/addon-interactions": "8.2.9",
+    "@storybook/addon-links": "8.2.9",
+    "@storybook/react": "8.2.9",
+    "@storybook/react-webpack5": "8.2.9",
+    "@storybook/test": "8.2.9",
+    "@tanstack/query-core": "5.51.24",
+    "@tanstack/query-sync-storage-persister": "5.51.24",
+    "@tanstack/react-query": "5.51.24",
+    "@tanstack/react-query-devtools": "5.51.24",
+    "@tanstack/react-query-persist-client": "5.51.24",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
@@ -81,8 +81,8 @@
     "@types/react-dom": "18.3.0",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.0.1",
-    "@typescript-eslint/parser": "8.0.1",
+    "@typescript-eslint/eslint-plugin": "8.1.0",
+    "@typescript-eslint/parser": "8.1.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
@@ -126,10 +126,10 @@
     "react-hook-form": "7.52.2",
     "react-intl": "6.6.8",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.26.0",
+    "react-router-dom": "6.26.1",
     "sass": "1.77.8",
     "source-map-loader": "5.0.0",
-    "storybook": "8.2.8",
+    "storybook": "8.2.9",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.5.4",
     "uuid": "10.0.0",
@@ -152,7 +152,7 @@
     "node": "20.11.0"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.2.8",
+    "@storybook/addon-mdx-gfm": "8.2.9",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }