richie-education 2.28.2-dev61 → 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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.28.2-dev61",
+  "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"
   }
 }