richie-education 3.3.1-dev12 → 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/SyllabusCourseRunsList/components/SyllabusAsideList/index.tsx

@@ -18,17 +18,6 @@ const messages = defineMessages({
       'Message displayed on the top of course runs list on syllabus when there is 0 or multiple course runs opened',
     defaultMessage: 'Course runs',
   },
-  noCourseRuns: {
-    id: 'components.SyllabusAsideList.noCourseRuns',
-    description: 'Message displayed on syllabus when there are no course runs to show',
-    defaultMessage: 'No course runs',
-  },
-  noOtherCourseRuns: {
-    id: 'components.SyllabusAsideList.noOtherCourseRuns',
-    description:
-      'Message displayed on syllabus when there are no other course runs to show than the only one opened',
-    defaultMessage: 'No other course runs',
-  },
   toBeScheduled: {
     id: 'components.SyllabusAsideList.toBeScheduled',
     description: 'Message displayed on syllabus when there are course runs to be scheduled',
@@ -108,28 +97,20 @@ export const SyllabusAsideList = ({
 
   const showLanguages = CourseRunHelper.IsAllCourseRunsWithSameLanguages(courseRuns);
 
+  // If there are no runs to display at all, don't render anything
+  if (openedRuns.length <= 1 && otherRuns.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <h2 className="course-detail__title">
-        {openedRuns.length === 1 ? (
-          <FormattedMessage {...messages.otherCourseRuns} />
-        ) : (
+        {openedRuns.length > 1 ? (
           <FormattedMessage {...messages.courseRunsTitle} />
+        ) : (
+          <FormattedMessage {...messages.otherCourseRuns} />
         )}
       </h2>
-      {openedRuns.length <= 1 && otherRuns.length === 0 && (
-        <div className="course-detail__row course-detail__no-runs">
-          {openedRuns.length === 0 ? (
-            <p>
-              <FormattedMessage {...messages.noCourseRuns} />
-            </p>
-          ) : (
-            <p>
-              <FormattedMessage {...messages.noOtherCourseRuns} />
-            </p>
-          )}
-        </div>
-      )}
       {openedRuns.length > 1 && (
         <div
           id="courseDetailsRunsOpen"

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

@@ -34,13 +34,18 @@ const messages = defineMessages({
   selfPaceRunPeriod: {
     id: 'components.SyllabusCourseRunCompacted.selfPaceCoursePeriod',
     description: 'Course date of an opened and self paced course run block',
-    defaultMessage: 'Available until {endDate}',
+    defaultMessage: 'Until {endDate, select, undefined {} other {{endDate}}}',
   },
   selfPaceNoEndDate: {
     id: 'components.SyllabusCourseRunCompacted.selfPaceNoEndDate',
     description: 'Self paced course run block with no end date',
     defaultMessage: 'Available',
   },
+  enrollment: {
+    id: 'components.SyllabusCourseRun.enrollment',
+    description: 'Title of the enrollment dates section of an opened course run block',
+    defaultMessage: 'Enrollment',
+  },
   coursePrice: {
     id: 'components.SyllabusCourseRunCompacted.coursePrice',
     description: 'Title of the course enrollment price section of an opened course run block',
@@ -105,6 +110,7 @@ const OpenedSelfPacedCourseRun = ({
   let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
   let certificateDiscountedPrice = '';
+  const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -157,23 +163,41 @@ const OpenedSelfPacedCourseRun = ({
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
       <dl>
-        {!showLanguages && (
-          <dt>
-            <FormattedMessage {...messages.course} />
-          </dt>
+        {hasEndDate ? (
+          <>
+            <dt>
+              <FormattedMessage {...messages.enrollment} />
+            </dt>
+            <dd>
+              <FormattedMessage
+                {...messages.selfPaceRunPeriod}
+                values={{
+                  endDate: enrollmentEnd,
+                }}
+              />
+            </dd>
+            <dt>
+              <FormattedMessage {...messages.course} />
+            </dt>
+            <dd>
+              <FormattedMessage
+                {...messages.selfPaceRunPeriod}
+                values={{
+                  endDate: end,
+                }}
+              />
+            </dd>
+          </>
+        ) : (
+          <>
+            <dt>
+              <FormattedMessage {...messages.enrollment} />
+            </dt>
+            <dd>
+              <FormattedMessage {...messages.selfPaceNoEndDate} />
+            </dd>
+          </>
         )}
-        <dd>
-          {hasEndDate ? (
-            <FormattedMessage
-              {...messages.selfPaceRunPeriod}
-              values={{
-                endDate: end,
-              }}
-            />
-          ) : (
-            <FormattedMessage {...messages.selfPaceNoEndDate} />
-          )}
-        </dd>
         {!showLanguages && (
           <>
             <dt>

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -172,7 +172,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
     const runContainer = heading.parentNode! as HTMLElement;
     const courseDatesText = courseRun.end
-      ? `Available until ${intl.formatDate(new Date(courseRun.end), DEFAULT_DATE_FORMAT)}`
+      ? `Until ${intl.formatDate(new Date(courseRun.end), DEFAULT_DATE_FORMAT)}`
       : `Available`;
 
     const courseDatesContainer = getByText(runContainer, courseDatesText);
@@ -221,7 +221,7 @@ describe('<SyllabusCourseRunsList/>', () => {
   const expectEmptyPortalContainer = () => {
     // This way of testing is a bit hard but we are SURE that there is no other content. This way
     // we are also testing the absence of other elements.
-    expect(getPortalContainer().textContent).toEqual('Other course runsNo other course runs');
+    expect(getPortalContainer().textContent).toContain('Other course runs');
   };
 
   it('has no opened course run', async () => {
@@ -390,10 +390,13 @@ describe('<SyllabusCourseRunsList/>', () => {
     const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
       resource_link: resourceLink,
     }).one();
+    const archivedCourseRun = CourseRunFactoryFromPriority(Priority.ARCHIVED_CLOSED)({
+      resource_link: resourceLink,
+    }).one();
 
     render(
       <SyllabusCourseRunsList
-        courseRuns={[courseRun]}
+        courseRuns={[courseRun, archivedCourseRun]}
         course={course}
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
@@ -412,12 +415,42 @@ describe('<SyllabusCourseRunsList/>', () => {
     expectEmptyPortalContainer();
   });
 
+  it('has only one opened product', async () => {
+    const course = PacedCourseFactory().one();
+    const offering = OfferingFactory().one();
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offering.product.id}/`;
+    fetchMock.get(resourceLink, offering);
+
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      resource_link: resourceLink,
+    }).one();
+
+    render(
+      <SyllabusCourseRunsList
+        courseRuns={[courseRun]}
+        course={course}
+        maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
+      />,
+      {
+        queryOptions: { client: createTestQueryClient({ user: null }) },
+      },
+    );
+
+    // Header.
+    expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
+      1,
+    );
+    await expectCourseProduct(getHeaderContainer(), offering);
+  });
+
   it('renders a specific title in portal when there is one opened course run', () => {
     const course = PacedCourseFactory().one();
+    const ongoingOpenCourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
+    const archivedCourseRun = CourseRunFactoryFromPriority(Priority.ARCHIVED_CLOSED)().one();
 
     render(
       <SyllabusCourseRunsList
-        courseRuns={[CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one()]}
+        courseRuns={[ongoingOpenCourseRun, archivedCourseRun]}
         course={course}
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,

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-dev12",
+  "version": "3.3.1-dev15",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {