richie 2.25.0b2.dev35__py2.py3-none-any.whl → 2.25.0b2.dev43__py2.py3-none-any.whl

frontend/js/components/Badge/index.tsx

@@ -6,6 +6,7 @@ type BadgeProps = PropsWithChildren<{
 }>;
 const Badge = ({ children, color }: BadgeProps) => (
   <div
+    data-testid="badge"
     className={classNames('category-badge', {
       [`category-badge--${color}`]: Boolean(color),
     })}

frontend/js/components/CourseGlimpse/index.spec.tsx

@@ -46,7 +46,6 @@ describe('widgets/Search/components/CourseGlimpse', () => {
         srcset: 'some srcset',
       },
     },
-    nb_seller_organizations: 1,
     state: {
       call_to_action: 'enroll now',
       datetime: '2019-03-14T10:35:47.823Z',

frontend/js/components/CourseGlimpse/index.tsx

@@ -28,7 +28,6 @@ export interface CourseGlimpseCourse {
       srcset?: string;
     }>;
   };
-  nb_seller_organizations: number;
   icon?: Nullable<{
     title: string;
     src: string;
@@ -68,11 +67,6 @@ const messages = defineMessages({
     description: 'Category label text for screen reader users',
     id: 'components.CourseGlimpse.categoryLabel',
   },
-  organizationsTitle: {
-    defaultMessage: 'Produced by {nbOrganizations} partners',
-    description: 'Organizations title for multiple organizations',
-    id: 'components.CourseGlimpse.organizationsTitle',
-  },
 });
 
 const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataProps) => {
@@ -114,7 +108,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
               <span className="course-glimpse__title-text">{course.title}</span>
             </CourseLink>
           </h3>
-          {course.nb_seller_organizations === 1 && course.organization.image ? (
+          {course.organization.image ? (
             <div className="course-glimpse__organization-logo">
               {/* alt forced to empty string because the organization name is rendered after */}
               <img
@@ -131,16 +125,7 @@ const CourseGlimpseBase = ({ context, course }: CourseGlimpseProps & CommonDataP
               title={intl.formatMessage(messages.organizationIconAlt)}
               size="small"
             />
-            <span className="title">
-              {course.nb_seller_organizations === 1 ? (
-                course.organization.title
-              ) : (
-                <FormattedMessage
-                  {...messages.organizationsTitle}
-                  values={{ nbOrganizations: course.nb_seller_organizations }}
-                />
-              )}
-            </span>
+            <span className="title">{course.organization.title}</span>
           </div>
           <div className="course-glimpse__metadata course-glimpse__metadata--code">
             <Icon

frontend/js/components/CourseGlimpse/utils.ts

@@ -38,7 +38,6 @@ const getCourseGlimpsePropsFromCourseProductRelation = (
       title: courseProductRelation.organizations[0].title,
       image: courseProductRelation.organizations[0].logo || null,
     },
-    nb_seller_organizations: courseProductRelation.organizations.length,
     product_id: courseProductRelation.product.id,
     course_route: courseRoute,
     state: courseProductRelation.product.state,
@@ -55,7 +54,6 @@ const getCourseGlimpsePropsFromRichieCourse = (course: RichieCourse): CourseGlim
     title: course.organization_highlighted,
     image: course.organization_highlighted_cover_image,
   },
-  nb_seller_organizations: course.organizations.length,
   icon: course.icon,
   state: course.state,
   duration: course.duration,
@@ -93,7 +91,6 @@ const getCourseGlimpsePropsFromJoanieCourse = (
       title: course.organizations[0].title,
       image: course.organizations[0].logo || null,
     },
-    nb_seller_organizations: course.organizations.length,
     state: course.state,
     nb_course_runs: course.course_run_ids.length,
   };

frontend/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}
       />
     </>
   );

frontend/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();

frontend/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/ }),

frontend/js/hooks/useCourseProductUnion/index.ts

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

frontend/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]);
+};

frontend/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 = () => {

frontend/js/pages/DashboardCourses/useOrdersEnrollments.tsx

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

frontend/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);

frontend/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'));
+  });
 });

frontend/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>