richie-education 3.3.1-dev13 → 3.3.1-dev15

package/js/pages/DashboardBatchOrders/index.spec.tsx

@@ -234,4 +234,107 @@ describe('<DashboardBatchOrders/>', () => {
 
     await screen.findByText('Completed');
   });
+
+  it('allows retrying payment after aborting the payment tunnel', async () => {
+    const batchOrder = BatchOrderReadFactory({
+      payment_method: PaymentMethod.CARD_PAYMENT,
+      state: BatchOrderState.PENDING,
+      total: 200,
+      currency: 'EUR',
+    }).one();
+
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`, {
+      results: [batchOrder],
+      count: 1,
+      next: null,
+      previous: null,
+    });
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/`, [batchOrder]);
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`, batchOrder);
+
+    render(<DashboardTest initialRoute={LearnerDashboardPaths.BATCH_ORDERS} />, {
+      wrapper: BaseJoanieAppWrapper,
+    });
+
+    await expectNoSpinner('Loading batch orders...');
+    await screen.findByText('Payment required');
+
+    // Open modal and start payment
+    await userEvent.click(await screen.findByRole('button', { name: 'Pay €200.00' }));
+
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/submit-for-payment/`,
+      { payment_id: 'payment_id', provider: 'payment_provider', url: 'payment_url' },
+    );
+
+    const firstModal = await screen.findByRole('dialog');
+    await userEvent.click(within(firstModal).getByRole('button', { name: 'Pay €200.00' }));
+
+    // Close payment modal
+    await screen.findByTestId('payment-abort');
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      {
+        results: [{ ...batchOrder, state: BatchOrderState.PROCESS_PAYMENT }],
+        count: 1,
+        next: null,
+        previous: null,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`,
+      { ...batchOrder, state: BatchOrderState.PROCESS_PAYMENT },
+      { overwriteRoutes: true },
+    );
+    await userEvent.click(screen.getByTestId('payment-abort'));
+
+    const modalAfterAbort = await screen.findByRole('dialog');
+    await userEvent.click(within(modalAfterAbort).getByRole('button', { name: 'close' }));
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+
+    await screen.findByText('Payment required');
+    await screen.findByRole('button', { name: 'Pay €200.00' });
+
+    // Retry payment successfully
+    await userEvent.click(await screen.findByRole('button', { name: 'Pay €200.00' }));
+
+    fetchMock.post(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/submit-for-payment/`,
+      { payment_id: 'payment_id', provider: 'payment_provider', url: 'payment_url' },
+      { overwriteRoutes: true },
+    );
+
+    const retryModal = await screen.findByRole('dialog');
+    await userEvent.click(within(retryModal).getByRole('button', { name: 'Pay €200.00' }));
+
+    await screen.findByTestId('payment-success');
+
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/?page=1&page_size=${perPage}`,
+      {
+        results: [{ ...batchOrder, state: BatchOrderState.COMPLETED }],
+        count: 1,
+        next: null,
+        previous: null,
+      },
+      { overwriteRoutes: true },
+    );
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/batch-orders/${batchOrder.id}/`,
+      { ...batchOrder, state: BatchOrderState.COMPLETED },
+      { overwriteRoutes: true },
+    );
+
+    await userEvent.click(screen.getByTestId('payment-success'));
+
+    await waitFor(() => {
+      expect(mockMessageModal).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Payment successful' }),
+      );
+    });
+
+    expect(screen.queryByRole('button', { name: /Pay/ })).not.toBeInTheDocument();
+    await screen.findByText('Completed');
+  });
 });

package/js/widgets/Dashboard/components/DashboardItem/BatchOrder/BatchOrderPaymentModal/BatchOrderPaymentManager.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { Button, useModal } from '@openfun/cunningham-react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useBatchOrder } from 'hooks/useBatchOrder';
-import { BatchOrderRead, BatchOrderState } from 'types/Joanie';
+import { BatchOrderRead } from 'types/Joanie';
 import { DashboardSubItem } from 'widgets/Dashboard/components/DashboardItem/DashboardSubItem';
 import { DashboardSubItemsList } from '../../DashboardSubItemsList';
 import { BatchOrderPaymentModal } from '.';
@@ -13,11 +13,6 @@ const messages = defineMessages({
     description: 'Label before the payment button',
     defaultMessage: 'We are waiting for your payment to finalize the batch order.',
   },
-  paymentProcessing: {
-    id: 'components.ProductCertificateFooter.paymentProcessing',
-    description: 'Button label for the payment is processing message',
-    defaultMessage: 'Payment processing...',
-  },
   paymentNeededButton: {
     id: 'components.ProductCertificateFooter.paymentNeededButton',
     description: 'Button label for the payment needed message',
@@ -38,7 +33,6 @@ export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProp
   const intl = useIntl();
   const retryModal = useModal();
   const batchOrderQuery = useBatchOrder(batchOrder.id);
-  const processingPayment = batchOrder.state === BatchOrderState.PROCESS_PAYMENT;
 
   useEffect(() => {
     if (batchOrderQuery.item) {
@@ -54,30 +48,24 @@ export const BatchOrderPaymentManager = ({ batchOrder }: BatchPaymentManagerProp
           footer={
             <div className="content">
               <FormattedMessage {...messages.batchOrderPayment} />
-              <Button
-                size="small"
-                color="primary"
-                onClick={retryModal.open}
-                disabled={processingPayment}
-              >
-                {processingPayment ? (
-                  <FormattedMessage {...messages.paymentProcessing} />
-                ) : (
-                  <FormattedMessage
-                    {...messages.paymentNeededButton}
-                    values={{
-                      amount: intl.formatNumber(batchOrder.total ?? 0, {
-                        style: 'currency',
-                        currency: batchOrder.currency ?? 'EUR',
-                      }),
-                    }}
-                  />
-                )}
+              <Button size="small" color="primary" onClick={retryModal.open}>
+                <FormattedMessage
+                  {...messages.paymentNeededButton}
+                  values={{
+                    amount: intl.formatNumber(batchOrder.total ?? 0, {
+                      style: 'currency',
+                      currency: batchOrder.currency ?? 'EUR',
+                    }),
+                  }}
+                />
               </Button>
               <BatchOrderPaymentModal
                 {...retryModal}
                 batchOrder={batchOrder}
-                onClose={batchOrderQuery.methods.invalidate}
+                onClose={() => {
+                  retryModal.onClose();
+                  batchOrderQuery.methods.invalidate();
+                }}
               />
             </div>
           }

package/js/widgets/cunningham-fr-FR-locale.json

@@ -0,0 +1,80 @@
+{
+  "components": {
+    "alert": {
+      "close_aria_label": "Supprimer l'alerte",
+      "expand_aria_label": "Ouvrir l'alerte",
+      "shrink_aria_label": "Fermer l'alerte"
+    },
+    "pagination": {
+      "goto_label": "Aller à",
+      "goto_label_aria": "Aller à la page",
+      "next_aria": "Aller à la page suivante",
+      "previous_aria": "Aller à la page précédente",
+      "goto_page_aria": "Aller à la page {page}",
+      "current_page_aria": "Vous êtes actuellement sur la page {page}"
+    },
+    "datagrid": {
+      "empty": "Ce tableau est vide",
+      "empty_alt": "Illustration d'un tableau vide",
+      "loader_aria": "Chargement des données",
+      "rows_selection_aria": "Toutes les lignes sélectionnées",
+      "row_selection_aria": "Ligne sélectionnée"
+    },
+    "provider": {
+      "test": "Ceci est un test : {name}"
+    },
+    "forms": {
+      "input": {
+        "password": {
+          "show_password": "Afficher le mot de passe",
+          "hide_password": "Masquer le mot de passe"
+        }
+      },
+      "select": {
+        "toggle_button_aria_label": "Ouvrir le menu",
+        "clear_button_aria_label": "Effacer la sélection",
+        "clear_all_button_aria_label": "Effacer toutes les sélections",
+        "menu_empty_placeholder": "Aucun choix disponible"
+      },
+      "file_uploader": {
+        "delete_file_name": "Supprimer le fichier {name}",
+        "delete_file": "Supprimer le fichier",
+        "uploading": "Upload en cours ...",
+        "caption": "Glisser-déposer ou ",
+        "browse_files": "Parcourir"
+      },
+      "date_picker": {
+        "toggle_button_aria_label_open": "Ouvrir le calendrier",
+        "toggle_button_aria_label_close": "Fermer le calendrier",
+        "clear_button_aria_label": "Effacer la date",
+        "next_month_button_aria_label": "Mois suivant",
+        "next_year_button_aria_label": "Année suivante",
+        "previous_month_button_aria_label": "Mois précédent",
+        "previous_year_button_aria_label": "Année précédente",
+        "year_select_button_aria_label": "Sélectionner une année",
+        "month_select_button_aria_label": "Sélectionner un mois"
+      }
+    },
+    "modals": {
+      "helpers": {
+        "delete_confirmation": {
+          "title": "Êtes-vous sûr ?",
+          "children": "Êtes-vous sûr de vouloir supprimer cet élément ?",
+          "cancel": "Annuler",
+          "delete": "Supprimer"
+        },
+        "confirmation": {
+          "title": "Êtes-vous sûr ?",
+          "children": "Êtes-vous sûr de vouloir faire cela ?",
+          "cancel": "Annuler",
+          "yes": "Oui"
+        },
+        "disclaimer": {
+          "title": "Avertissement",
+          "children": "Ceci est un avertissement",
+          "ok": "Ok"
+        }
+      }
+    }
+  }
+}

package/js/widgets/index.tsx

@@ -4,6 +4,7 @@ import startCase from 'lodash-es/startCase';
 import { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { CunninghamProvider } from '@openfun/cunningham-react';
+import cunninghamFrFRLocale from 'widgets/cunningham-fr-FR-locale.json';
 import { HistoryProvider } from 'hooks/useHistory';
 import { SessionProvider } from 'contexts/SessionContext';
 import { Spinner } from 'components/Spinner';
@@ -105,7 +106,11 @@ export const Root = ({ richieReactSpots, locale = 'en-US' }: RootProps) => {
   });
 
   return (
-    <CunninghamProvider currentLocale={locale}>
+    <CunninghamProvider
+      currentLocale={locale}
+      // TODO: remove customLocales and the cunningham-fr-FR-locale.json file once Cunningham is upgraded to v4+
+      customLocales={{ 'fr-FR': cunninghamFrFRLocale }}
+    >
       <SessionProvider>
         <HistoryProvider>
           <Suspense fallback={<Spinner />}>{portals}</Suspense>

package/package.json

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