richie-education 2.25.0-b2.dev35 → 2.25.0-b2.dev41

package/js/components/PurchaseButton/index.tsx

@@ -4,7 +4,7 @@ import { useMemo, useState } from 'react';
 import { Button, ButtonProps } from '@openfun/cunningham-react';
 import { useSession } from 'contexts/SessionContext';
 import * as Joanie from 'types/Joanie';
-import SaleTunnel from 'components/SaleTunnel';
+import SaleTunnel, { SaleTunnelProps } from 'components/SaleTunnel';
 import { isOpenedCourseRunCertificate, isOpenedCourseRunCredential } from 'utils/CourseRuns';
 
 const messages = defineMessages({
@@ -45,6 +45,7 @@ interface PurchaseButtonPropsBase {
   disabled?: boolean;
   className?: string;
   buttonProps?: ButtonProps;
+  onFinish?: SaleTunnelProps['onFinish'];
 }
 
 interface CredentialPurchaseButtonProps extends PurchaseButtonPropsBase {
@@ -67,6 +68,7 @@ const PurchaseButton = ({
   disabled = false,
   className,
   buttonProps,
+  onFinish,
 }: CredentialPurchaseButtonProps | CertificatePurchaseButtonProps) => {
   const intl = useIntl();
   const { user, login } = useSession();
@@ -147,6 +149,7 @@ const PurchaseButton = ({
         enrollment={enrollment}
         orderGroup={orderGroup}
         course={course}
+        onFinish={onFinish}
       />
     </>
   );

package/js/components/SaleTunnel/index.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useQueryClient } from '@tanstack/react-query';
 import { Modal } from 'components/Modal';
 import {
   CourseLight,
@@ -49,13 +50,14 @@ const focusCurrentStep = (container: HTMLElement) => {
   }
 };
 
-interface SaleTunnelProps {
+export interface SaleTunnelProps {
   isOpen: boolean;
   onClose: () => void;
   course?: CourseLight;
   enrollment?: Enrollment;
   product: CredentialProduct | CertificateProduct;
   orderGroup?: OrderGroup;
+  onFinish?: (order: Order) => void;
 }
 
 const SaleTunnel = ({
@@ -65,6 +67,7 @@ const SaleTunnel = ({
   onClose,
   enrollment,
   orderGroup,
+  onFinish,
 }: SaleTunnelProps) => {
   const intl = useIntl();
   const {
@@ -76,6 +79,7 @@ const SaleTunnel = ({
   const key = `${product.type === ProductType.CREDENTIAL ? course!.code : enrollment!.id}+${
     product.id
   }`;
+  const queryClient = useQueryClient();
 
   const [order, setOrder] = useState<Maybe<Order>>();
 
@@ -108,6 +112,8 @@ const SaleTunnel = ({
           // to update the ordersQuery cache
           invalidateOrders();
           refetchOmniscientOrders();
+          queryClient.invalidateQueries({ queryKey: ['user', 'enrollments'] });
+          onFinish?.(order!);
         },
         onExit: () => {
           handleModalClose();

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

@@ -102,7 +102,7 @@ describe('components/TeacherDashboardCourseList', () => {
     );
 
     expect(
-      screen.getByRole('heading', { name: /One lesson about: How to cook birds/ }),
+      await screen.findByRole('heading', { name: /One lesson about: How to cook birds/ }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole('heading', { name: /One lesson about: Let's dance, the online lesson/ }),

package/js/hooks/useCourseProductUnion/index.ts

@@ -51,5 +51,6 @@ export const useCourseProductUnion = ({
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/hooks/useQueryKeyInvalidateListener.tsx

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import usePrevious from 'hooks/usePrevious';
+
+export const useQueryKeyInvalidateListener = (queryKey: string[], callback: Function) => {
+  const { data: refreshFlag } = useQuery({
+    queryKey: [...queryKey, 'refresh-flag'],
+    queryFn: () => Math.random(),
+  });
+  const previousRefreshFlag = usePrevious(refreshFlag);
+  useEffect(() => {
+    if (previousRefreshFlag) {
+      callback();
+    }
+  }, [refreshFlag]);
+};

package/js/hooks/useUnionResource/index.ts

@@ -4,6 +4,7 @@ import { MessageDescriptor, defineMessages, useIntl } from 'react-intl';
 import { Maybe } from 'yup';
 import { PaginatedResourceQuery, PaginatedResponse } from 'types/Joanie';
 import { PER_PAGE } from 'settings';
+import { useQueryKeyInvalidateListener } from 'hooks/useQueryKeyInvalidateListener';
 import { syncIntegrityCount } from './utils/syncIntegrityCount';
 import { FetchEntityData } from './utils/fetchEntities';
 import { QueryConfig } from './utils/fetchEntity';
@@ -39,6 +40,7 @@ interface UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>
   queryAConfig: QueryConfig<DataA, FiltersA>;
   queryBConfig: QueryConfig<DataB, FiltersB>;
   errorGetMessage?: MessageDescriptor;
+  refetchOnInvalidation?: boolean;
 }
 
 /**
@@ -58,6 +60,7 @@ const useUnionResource = <
   queryBConfig,
   perPage = PER_PAGE.useUnionResources,
   errorGetMessage = messages.errorGet,
+  refetchOnInvalidation = true,
 }: UseUnionResourceProps<DataA, DataB, FiltersA, FiltersB>): UseUnionResourceReturns<
   DataA,
   DataB
@@ -69,7 +72,7 @@ const useUnionResource = <
   const [totalCount, setTotalCount] = useState<number | undefined>();
   const [error, setError] = useState<Maybe<string>>();
 
-  // cursor is the total amount of entities what we whant to display.
+  // cursor is the total amount of entities what we want to display.
   const [cursor, setCursor] = useState(perPage);
 
   // integrityCount is the number of fetched entities A and B that are correctly ordered.
@@ -87,6 +90,20 @@ const useUnionResource = <
   const eofRef = useRef<Record<string, number>>(queryClient.getQueryData(eofQueryKey) ?? {});
   log('eof', eofRef.current);
 
+  const reset = () => {
+    setStack([]);
+    setPage(0);
+    setTotalCount(undefined);
+    setError(undefined);
+    setCursor(perPage);
+    setIntegrityCount(0);
+  };
+
+  if (refetchOnInvalidation) {
+    useQueryKeyInvalidateListener(queryAConfig.queryKey, reset);
+    useQueryKeyInvalidateListener(queryBConfig.queryKey, reset);
+  }
+
   useEffect(() => {
     async function fetchNewPage() {
       const {
@@ -132,7 +149,7 @@ const useUnionResource = <
       setIsSyncing(true);
       fetchNewPage();
     }
-  }, [cursor]);
+  }, [cursor, stack.length]); // stack.length is added in the dependency array to force a new fetch on reset.
 
   const cursorToUse = Math.min(cursor, integrityCount);
   const next = () => {

package/js/pages/DashboardCourses/useOrdersEnrollments.tsx

@@ -68,5 +68,6 @@ export const useOrdersEnrollments = ({
     },
     perPage,
     errorGetMessage: messages.errorGet,
+    refetchOnInvalidation: false,
   });
 };

package/js/utils/CreditCardHelper/index.spec.tsx

@@ -27,19 +27,16 @@ describe('CreditCardHelper', () => {
   });
 
   it('is soon expired', () => {
-    const refDate = new Date();
-    refDate.setMonth(refDate.getMonth() + 1);
-    refDate.setDate(1);
-    const futureLessThan3Months = faker.date.future({
+    const expirationDate = faker.date.future({
+      refDate: new Date(),
       years: 2.99 / 12,
-      refDate,
     });
 
     expect(
       CreditCardHelper.getExpirationState(
         CreditCardFactory({
-          expiration_month: futureLessThan3Months.getMonth() + 1,
-          expiration_year: futureLessThan3Months.getFullYear(),
+          expiration_month: expirationDate.getMonth() + 1,
+          expiration_year: expirationDate.getFullYear(),
         }).one(),
       ),
     ).toBe(CreditCardExpirationStatus.SOON);

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

@@ -1,7 +1,8 @@
 import { IntlProvider } from 'react-intl';
-import { render, screen } from '@testing-library/react';
-import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import fetchMock from 'fetch-mock';
+import userEvent from '@testing-library/user-event';
 import { CertificateProduct, CourseLight, OrderState, ProductType } from 'types/Joanie';
 import {
   CourseStateFactory,
@@ -19,6 +20,12 @@ import {
 import { Priority } from 'types';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { PER_PAGE } from 'settings';
+import { SaleTunnelProps } from 'components/SaleTunnel';
 import ProductCertificateFooter, { ProductCertificateFooterProps } from '.';
 
 jest.mock('utils/context', () => ({
@@ -28,6 +35,24 @@ jest.mock('utils/context', () => ({
     joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
   }).one(),
 }));
+jest.mock('components/SaleTunnel', () => ({
+  __esModule: true,
+  default: ({ isOpen, onFinish }: SaleTunnelProps) => {
+    const React = require('react');
+    const Factories = require('utils/test/factories/joanie');
+    // Automatically call onFinish() callback after 100ms when the SaleTunnel is opened to simulate a payment.
+    React.useEffect(() => {
+      if (!isOpen) {
+        return;
+      }
+      setTimeout(() => {
+        const order = Factories.CertificateOrderWithOneClickPaymentFactory().one();
+        onFinish?.(order);
+      }, 100);
+    }, [isOpen]);
+    return <div data-testid="SaleTunnelMock" />;
+  },
+}));
 
 describe('<ProductCertificateFooter/>', () => {
   const Wrapper = ({ product, enrollment }: ProductCertificateFooterProps) => (
@@ -165,4 +190,66 @@ describe('<ProductCertificateFooter/>', () => {
     expect(await screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
     expect(screen.queryByTestId('PurchaseButton__cta')).not.toBeInTheDocument();
   });
+
+  // From https://github.com/openfun/richie/issues/2237
+  it('should hide purchase button after payment', async () => {
+    const TestWrapper = ({ client }: { client?: QueryClient }) => {
+      const user = UserFactory().one();
+      return (
+        <QueryClientProvider client={client ?? createTestQueryClient({ user })}>
+          <IntlProvider locale="en">
+            {/* <HistoryContext.Provider value={makeHistoryOf({})}> */}
+            <SessionProvider>
+              <DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />
+            </SessionProvider>
+            {/* </HistoryContext.Provider> */}
+          </IntlProvider>
+        </QueryClientProvider>
+      );
+    };
+
+    const client = createTestQueryClient({ user: true });
+    fetchMock.get(
+      `https://joanie.endpoint.test/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      {
+        results: [],
+        next: null,
+        previous: null,
+        count: 0,
+      },
+    );
+
+    const enrollment = EnrollmentFactory({
+      course_run: CourseRunFactory({
+        state: CourseStateFactory({ priority: Priority.ONGOING_OPEN }).one(),
+        course,
+      }).one(),
+    }).one();
+    enrollment.product_relations[0].product = CertificateProductFactory().one();
+
+    fetchMock.get(
+      `https://joanie.endpoint.test/api/v1.0/enrollments/?was_created_by_order=false&page=1&page_size=${PER_PAGE.useOrdersEnrollments}`,
+      {
+        results: [enrollment],
+        next: null,
+        previous: null,
+        count: 1,
+      },
+    );
+
+    render(<TestWrapper client={client} />);
+    const user = userEvent.setup();
+    await expectNoSpinner('Loading orders and enrollments...');
+    await screen.findByRole('heading', {
+      name: enrollment.course_run.course.title,
+      level: 5,
+    });
+
+    // Click on the purchase button, memo: the SaleTunnel is mocked at the top of this file.
+    const purchaseButton = screen.getByTestId('PurchaseButton__cta');
+    await user.click(purchaseButton);
+
+    // Then the onFinish() callback of the SaleTunnel is automatically called via the mock.
+    await waitForElementToBeRemoved(screen.queryByTestId('PurchaseButton__cta'));
+  });
 });

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

@@ -1,4 +1,5 @@
 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 } from 'types/Joanie';
@@ -35,7 +36,9 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
   if (product.type !== ProductType.CERTIFICATE) {
     return null;
   }
-  const activeOrder = getActiveEnrollmentOrder(enrollment.orders || [], product.id);
+  const [activeOrder, setActiveOrder] = useState(
+    getActiveEnrollmentOrder(enrollment.orders || [], product.id),
+  );
   const { item: certificate } = useCertificate(activeOrder?.certificate_id);
 
   // The course run is no longer available
@@ -69,6 +72,14 @@ const ProductCertificateFooter = ({ product, enrollment }: ProductCertificateFoo
           className="dashboard-item__button"
           product={product}
           enrollment={enrollment}
+          onFinish={(order) => {
+            /**
+             * 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.
+             */
+            setActiveOrder(order);
+          }}
         />
       )}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.25.0-b2.dev35",
+  "version": "2.25.0-b2.dev41",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,20 +38,20 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.23.7",
+    "@babel/core": "7.23.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.23.3",
-    "@babel/preset-env": "7.23.8",
+    "@babel/preset-env": "7.23.9",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
-    "@faker-js/faker": "8.3.1",
-    "@formatjs/cli": "6.2.6",
+    "@faker-js/faker": "8.4.0",
+    "@formatjs/cli": "6.2.7",
     "@formatjs/intl-relativetimeformat": "11.2.12",
     "@hookform/resolvers": "3.3.4",
     "@openfun/cunningham-react": "2.4.0",
     "@openfun/cunningham-tokens": "2.1.0",
-    "@sentry/browser": "7.94.1",
-    "@sentry/types": "7.94.1",
+    "@sentry/browser": "7.98.0",
+    "@sentry/types": "7.98.0",
     "@storybook/addon-actions": "7.6.10",
     "@storybook/addon-essentials": "7.6.10",
     "@storybook/addon-interactions": "7.6.10",
@@ -64,7 +64,7 @@
     "@tanstack/react-query": "5.17.19",
     "@tanstack/react-query-persist-client": "5.17.19",
     "@testing-library/dom": "9.3.4",
-    "@testing-library/jest-dom": "6.2.1",
+    "@testing-library/jest-dom": "6.4.0",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
     "@types/fetch-mock": "7.3.8",
@@ -78,9 +78,9 @@
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.2.18",
     "@types/react-modal": "3.16.3",
-    "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
+    "@types/uuid": "9.0.8",
+    "@typescript-eslint/eslint-plugin": "6.20.0",
+    "@typescript-eslint/parser": "6.20.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-react-intl": "8.2.25",
@@ -95,7 +95,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.8",
     "eslint-plugin-compat": "4.2.0",
-    "eslint-plugin-formatjs": "4.12.1",
+    "eslint-plugin-formatjs": "4.12.2",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-prettier": "5.1.3",
@@ -113,7 +113,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.1.4",
+    "msw": "2.1.5",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.0.3",
     "prettier": "3.2.4",
@@ -122,7 +122,7 @@
     "react-autosuggest": "10.1.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.49.3",
-    "react-intl": "6.6.1",
+    "react-intl": "6.6.2",
     "react-modal": "3.16.1",
     "react-router-dom": "6.21.3",
     "sass": "1.70.0",
@@ -131,7 +131,7 @@
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.3.3",
     "uuid": "9.0.1",
-    "webpack": "5.89.0",
+    "webpack": "5.90.0",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",