richie-education 2.28.1 → 2.28.2-dev23

package/js/components/AddressesManagement/AddressForm/validationSchema.spec.ts

@@ -15,7 +15,7 @@ describe('validationSchema', () => {
       first_name: faker.person.firstName(),
       last_name: faker.person.lastName(),
       postcode: faker.location.zipCode(),
-      title: faker.lorem.word(),
+      title: faker.lorem.word({ length: { min: 2, max: 15 } }),
       save: false,
     };
 
@@ -130,7 +130,7 @@ describe('validationSchema', () => {
       result.current.setValue('first_name', faker.person.firstName());
       result.current.setValue('last_name', faker.person.lastName());
       result.current.setValue('postcode', faker.location.zipCode());
-      result.current.setValue('title', faker.lorem.word());
+      result.current.setValue('title', faker.lorem.word({ length: { min: 2, max: 15 } }));
       result.current.trigger();
     });
 

package/js/components/PaymentInterfaces/LyraPopIn.tsx

@@ -25,11 +25,13 @@ const LyraPopIn = ({
   const intl = useIntl();
   const shouldAbort = useRef<Boolean>(true);
 
-  const handleError = (error?: Error) => {
-    if (error) handle(`[LyraPopIn] - ${error}`);
+  const handleError = (error?: Error | string) => {
+    if (error && typeof error === 'string') handle(`[LyraPopIn] - ${error}`);
 
     if (shouldAbort.current) {
       onError(PaymentErrorMessageId.ERROR_ABORTING);
+    } else if (typeof error === 'string') {
+      onError(error);
     } else {
       onError(PaymentErrorMessageId.ERROR_DEFAULT);
     }
@@ -95,8 +97,13 @@ const LyraPopIn = ({
       // Do not close the pop-in if the error is a invalid data error (CLIENT_3XX).
       // https://docs.lyra.com/fr/rest/V4.0/javascript/features/js_error_management.html#client004
       if (!error.errorCode.startsWith('CLIENT_3')) {
+        shouldAbort.current = false;
         await KR.closePopin(formId);
-        handleError();
+        let errorMessages = error.errorMessage;
+        if (error.detailedErrorMessage) {
+          errorMessages += `: ${error.detailedErrorMessage}`;
+        }
+        handleError(errorMessages);
       }
     };
 

package/js/components/PaymentInterfaces/types.ts

@@ -42,5 +42,5 @@ export type Payment = DummyPayment | PayplugPayment | LyraPayment;
 
 export type PaymentInterfaceProps<P extends Payment = Payment> = P & {
   onSuccess: () => void;
-  onError: (messageId: PaymentErrorMessageId) => void;
+  onError: (messageId: string | PaymentErrorMessageId) => void;
 };

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

@@ -6,12 +6,12 @@ import userEvent from '@testing-library/user-event';
 import { CunninghamProvider } from '@openfun/cunningham-react';
 import {
   CourseStateFactory,
+  PacedCourseFactory,
   UserFactory,
   RichieContextFactory as mockRichieContextFactory,
 } from 'utils/test/factories/richie';
 import {
   CertificateProductFactory,
-  CourseLightFactory,
   EnrollmentFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
@@ -89,7 +89,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: '00000' }).one()}
+          course={PacedCourseFactory({ code: '00000' }).one()}
         />
       </Wrapper>,
     );
@@ -112,7 +112,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );
@@ -146,7 +146,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );
@@ -181,7 +181,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );
@@ -214,7 +214,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );
@@ -251,7 +251,7 @@ describe('PurchaseButton', () => {
           <PurchaseButton
             product={product}
             disabled={false}
-            course={CourseLightFactory({ code: courseCode }).one()}
+            course={PacedCourseFactory({ code: courseCode }).one()}
           />
         </Wrapper>,
       );
@@ -384,7 +384,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={false}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );
@@ -414,7 +414,7 @@ describe('PurchaseButton', () => {
         <PurchaseButton
           product={product}
           disabled={true}
-          course={CourseLightFactory({ code: courseCode }).one()}
+          course={PacedCourseFactory({ code: courseCode }).one()}
         />
       </Wrapper>,
     );

package/js/components/PurchaseButton/index.tsx

@@ -7,6 +7,7 @@ import * as Joanie from 'types/Joanie';
 import { isOpenedCourseRunCertificate, isOpenedCourseRunCredential } from 'utils/CourseRuns';
 import { SaleTunnel, SaleTunnelProps } from 'components/SaleTunnel';
 import { Organization } from 'types/Joanie';
+import { PacedCourse } from 'types';
 
 const messages = defineMessages({
   loginToPurchase: {
@@ -52,7 +53,7 @@ interface PurchaseButtonPropsBase {
 
 interface CredentialPurchaseButtonProps extends PurchaseButtonPropsBase {
   product: Joanie.CredentialProduct;
-  course: Joanie.CourseLight;
+  course: PacedCourse;
   enrollment?: undefined;
 }
 

package/js/components/SaleTunnel/GenericPaymentButton/index.tsx

@@ -97,7 +97,7 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
   const { methods: orderMethods } = useOrders(undefined, { enabled: false });
   const [payment, setPayment] = useState<PaymentInfo>();
   const [state, setState] = useState<ComponentStates>(ComponentStates.IDLE);
-  const [error, setError] = useState<PaymentErrorMessageId>();
+  const [error, setError] = useState<PaymentErrorMessageId | string>();
   const hasPaymentId = (p: Maybe<Payment>): p is Extract<Payment, PaymentWithId> => {
     return Boolean(p?.hasOwnProperty('payment_id'));
   };
@@ -256,7 +256,9 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
     checkOrderValidity();
   };
 
-  const handleError = (messageId: PaymentErrorMessageId = PaymentErrorMessageId.ERROR_DEFAULT) => {
+  const handleError = (
+    messageId: PaymentErrorMessageId | string = PaymentErrorMessageId.ERROR_DEFAULT,
+  ) => {
     setState(ComponentStates.ERROR);
     setError(messageId);
   };
@@ -274,6 +276,8 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
         .catch(() => {
           handleError();
         });
+    } else if (error && !messages.hasOwnProperty(error)) {
+      orderMethods.invalidate();
     } else if (state === ComponentStates.ERROR) {
       setPayment(undefined);
     }
@@ -320,7 +324,13 @@ export const GenericPaymentButton = ({ buildOrderPayload }: Props) => {
       )}
       {state === ComponentStates.ERROR && (
         <p className="payment-button__error" id="sale-tunnel-payment-error" tabIndex={-1}>
-          <FormattedMessage {...messages[error || PaymentErrorMessageId.ERROR_DEFAULT]} />
+          {!error || messages.hasOwnProperty(error) ? (
+            <FormattedMessage
+              {...messages[(error as PaymentErrorMessageId) || PaymentErrorMessageId.ERROR_DEFAULT]}
+            />
+          ) : (
+            error
+          )}
         </p>
       )}
     </>

package/js/components/SaleTunnel/hooks/useTerms.tsx

@@ -29,8 +29,8 @@ export const useTerms = ({
   error,
 }: {
   product: Product;
-  onError: (error: PaymentErrorMessageId) => void;
-  error?: PaymentErrorMessageId;
+  onError: (error: PaymentErrorMessageId | string) => void;
+  error?: PaymentErrorMessageId | string;
 }) => {
   const intl = useIntl();
   const [termsAccepted, setTermsAccepted] = useState(false);

package/js/components/SaleTunnel/index.credential.spec.tsx

@@ -2,12 +2,12 @@ import fetchMock from 'fetch-mock';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import {
   RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
   UserFactory,
 } from 'utils/test/factories/richie';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import {
   AddressFactory,
-  CourseFactory,
   CredentialOrderWithPaymentFactory,
   CredentialProductFactory,
   OrderGroupFactory,
@@ -86,7 +86,7 @@ describe('SaleTunnel / Credential', () => {
   });
 
   it('should create an order with an order group', async () => {
-    const course = CourseFactory().one();
+    const course = PacedCourseFactory().one();
     const product = CredentialProductFactory().one();
     const orderGroup = OrderGroupFactory().one();
     const billingAddress: Joanie.Address = AddressFactory({ is_main: true }).one();

package/js/components/SaleTunnel/index.full-process.spec.tsx

@@ -5,6 +5,7 @@ import userEvent from '@testing-library/user-event';
 import countries from 'i18n-iso-countries';
 import {
   RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
   UserFactory,
 } from 'utils/test/factories/richie';
 import { render } from 'utils/test/render';
@@ -12,8 +13,8 @@ import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
 import CourseProductItem from 'widgets/SyllabusCourseRunsList/components/CourseProductItem';
 import {
   AddressFactory,
-  CourseProductRelationFactory,
   CredentialOrderWithPaymentFactory,
+  CourseProductRelationFactory,
 } from 'utils/test/factories/joanie';
 import { ACTIVE_ORDER_STATES, CourseRun } from 'types/Joanie';
 import { Priority } from 'types';
@@ -101,9 +102,15 @@ describe('SaleTunnel', () => {
       [],
     );
 
-    render(<CourseProductItem productId={product.id} course={course} />, {
-      queryOptions: { client: createTestQueryClient({ user: richieUser }) },
-    });
+    render(
+      <CourseProductItem
+        productId={product.id}
+        course={PacedCourseFactory({ id: course.id, code: course.code }).one()}
+      />,
+      {
+        queryOptions: { client: createTestQueryClient({ user: richieUser }) },
+      },
+    );
 
     // Wait for product information to be fetched
     await screen.findByRole('heading', { level: 3, name: product.title });

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

@@ -8,7 +8,6 @@ import {
   CertificateOrderWithOneClickPaymentFactory,
   CertificateOrderWithPaymentFactory,
   CertificateProductFactory,
-  CourseFactory,
   CredentialOrderWithOneClickPaymentFactory,
   CredentialOrderWithPaymentFactory,
   CredentialProductFactory,
@@ -17,6 +16,7 @@ import {
 } from 'utils/test/factories/joanie';
 import {
   RichieContextFactory as mockRichieContextFactory,
+  PacedCourseFactory,
   UserFactory,
 } from 'utils/test/factories/richie';
 import { render } from 'utils/test/render';
@@ -70,7 +70,7 @@ describe.each([
   ({ productType, ProductFactory, OrderWithOneClickPaymentFactory, OrderWithPaymentFactory }) => {
     let nbApiCalls: number;
 
-    const course = CourseFactory().one();
+    const course = PacedCourseFactory().one();
     const enrollment =
       productType === ProductType.CERTIFICATE ? EnrollmentFactory().one() : undefined;
 

package/js/components/SaleTunnel/index.stories.tsx

@@ -1,6 +1,7 @@
 import { StoryObj, Meta } from '@storybook/react';
 import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
-import { CourseFactory, ProductFactory } from 'utils/test/factories/joanie';
+import { ProductFactory } from 'utils/test/factories/joanie';
+import { PacedCourseFactory } from 'utils/test/factories/richie';
 import { SaleTunnel, SaleTunnelProps } from './index';
 
 export default {
@@ -10,7 +11,7 @@ export default {
       isOpen: true,
       product: ProductFactory().one(),
       onClose: () => {},
-      course: CourseFactory().one(),
+      course: PacedCourseFactory().one(),
       // enrollment?: Enrollment;
       // product: CredentialProduct | CertificateProduct;
       // orderGroup?: OrderGroup;

package/js/components/SaleTunnel/index.tsx

@@ -1,7 +1,6 @@
 import { ModalProps } from '@openfun/cunningham-react';
 import {
   CertificateProduct,
-  CourseLight,
   CredentialProduct,
   Enrollment,
   Order,
@@ -12,12 +11,13 @@ import {
 } from 'types/Joanie';
 import { CredentialSaleTunnel } from 'components/SaleTunnel/CredentialSaleTunnel';
 import { CertificateSaleTunnel } from 'components/SaleTunnel/CertificateSaleTunnel';
+import { PacedCourse } from 'types';
 
 export interface SaleTunnelProps extends Pick<ModalProps, 'isOpen' | 'onClose'> {
   product: Product;
   organizations?: Organization[];
 
-  course?: CourseLight;
+  course?: PacedCourse;
   enrollment?: Enrollment;
   orderGroup?: OrderGroup;
   onFinish?: (order: Order) => void;

package/js/types/commonDataProps.ts

@@ -23,7 +23,6 @@ enum FEATURES {
 
 export interface RichieContext {
   authentication: AuthenticationBackend;
-  csrftoken: string;
   environment: string;
   features: Partial<Record<FEATURES, boolean>>;
   joanie_backend?: JoanieBackend;

package/js/types/index.ts

@@ -16,6 +16,12 @@ export enum CourseRunDisplayMode {
   DETAILED = 'detailed',
 }
 
+export interface PacedCourse {
+  id: string;
+  code: string;
+  is_self_paced: boolean;
+}
+
 export interface CourseRun {
   id: number;
   resource_link: string;

package/js/utils/CourseRunHelper/index.spec.ts

@@ -0,0 +1,35 @@
+import { CourseRun, Priority } from 'types';
+import { CourseRunHelper } from 'utils/CourseRunHelper/index';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+
+describe('CourseRunHelper', () => {
+  it('should return true if all course runs have the same languages', () => {
+    const courseRuns: CourseRun[] = [
+      CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+        languages: ['en'],
+      }).one(),
+      CourseRunFactoryFromPriority(Priority.ARCHIVED_OPEN)({
+        languages: ['en'],
+      }).one(),
+      CourseRunFactoryFromPriority(Priority.FUTURE_OPEN)({
+        languages: ['en'],
+      }).one(),
+    ];
+    expect(CourseRunHelper.IsAllCourseRunsWithSameLanguages(courseRuns)).toEqual(true);
+  });
+
+  it('should return false if all course runs have different languages', () => {
+    const courseRuns: CourseRun[] = [
+      CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+        languages: ['en'],
+      }).one(),
+      CourseRunFactoryFromPriority(Priority.ARCHIVED_OPEN)({
+        languages: ['fr'],
+      }).one(),
+      CourseRunFactoryFromPriority(Priority.FUTURE_OPEN)({
+        languages: ['it'],
+      }).one(),
+    ];
+    expect(CourseRunHelper.IsAllCourseRunsWithSameLanguages(courseRuns)).toEqual(false);
+  });
+});

package/js/utils/CourseRunHelper/index.ts

@@ -0,0 +1,13 @@
+import { CourseRun } from 'types';
+
+export class CourseRunHelper {
+  /**
+   * Checks if all given runs of a course have the same languages.
+   */
+  static IsAllCourseRunsWithSameLanguages = (courseRuns: CourseRun[]) => {
+    const languages = courseRuns[0].languages.sort().join();
+    return courseRuns
+      .map((courseRun) => courseRun.languages.sort().join())
+      .every((runLanguages) => runLanguages === languages);
+  };
+}

package/js/utils/react-query/useSessionQuery/index.ts

@@ -45,7 +45,7 @@ export function useSessionQuery<
   }, [user, options?.enabled]);
 
   const staleTime = useMemo(() => {
-    if (options?.staleTime !== undefined && options.staleTime >= 0) {
+    if (typeof options?.staleTime === 'number' && options.staleTime >= 0) {
       return options.staleTime;
     }
     return REACT_QUERY_SETTINGS.staleTimes.sessionItems;

package/js/utils/test/factories/richie.ts

@@ -2,7 +2,14 @@ import { faker } from '@faker-js/faker';
 import { User } from 'types/User';
 import { APIBackend } from 'types/api';
 import { CommonDataProps } from 'types/commonDataProps';
-import { CourseRun, CourseRunDisplayMode, CourseState, CourseStateTextEnum, Priority } from 'types';
+import {
+  CourseRun,
+  CourseRunDisplayMode,
+  CourseState,
+  CourseStateTextEnum,
+  PacedCourse,
+  Priority,
+} from 'types';
 import { Course } from 'types/Course';
 import { FactoryHelper } from 'utils/test/factories/helper';
 import { factory } from './factories';
@@ -54,6 +61,14 @@ export const CourseRunFactory = factory<CourseRun>(() => {
   };
 });
 
+export const PacedCourseFactory = factory((): PacedCourse => {
+  return {
+    id: faker.string.uuid(),
+    code: faker.string.alphanumeric(5),
+    is_self_paced: false,
+  };
+});
+
 export const CourseRunFactoryFromPriority = (priority: Priority) => {
   return factory<CourseRun>(() => {
     let courseRun = CourseRunFactory().one();
@@ -152,7 +167,6 @@ export const RichieContextFactory = factory<CommonDataProps['context']>(() => ({
     backend: APIBackend.OPENEDX_HAWTHORN,
     endpoint: 'https://endpoint.test',
   },
-  csrftoken: faker.string.alphanumeric(64),
   environment: 'test',
   features: {},
   lms_backends: [

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/CourseProductItemFooter/index.tsx

@@ -1,6 +1,7 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import PurchaseButton from 'components/PurchaseButton';
-import { CourseLight, CourseProductRelation, CredentialProduct, OrderGroup } from 'types/Joanie';
+import { CourseProductRelation, CredentialProduct, OrderGroup } from 'types/Joanie';
+import { PacedCourse } from 'types';
 
 const messages = defineMessages({
   noSeatsAvailable: {
@@ -22,7 +23,7 @@ other {# remaining seats}
 });
 
 interface CourseProductItemFooterProps {
-  course: CourseLight;
+  course: PacedCourse;
   courseProductRelation: CourseProductRelation;
   canPurchase: boolean;
   orderGroups: OrderGroup[];