richie-education 2.25.0-b2.dev58 → 2.25.0-b2.dev63

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

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { PaymentErrorMessageId } from 'components/PaymentButton/index';
 import { Product } from 'types/Joanie';
-import { useJoanieApi } from 'contexts/JoanieApiContext';
+import context from 'utils/context';
 
 const messages = defineMessages({
   termsMessage: {
@@ -33,7 +33,6 @@ export const useTerms = ({
   error?: PaymentErrorMessageId;
 }) => {
   const intl = useIntl();
-  const api = useJoanieApi();
   const [termsAccepted, setTermsAccepted] = useState(false);
   const validateTerms = () => {
     if (!product.contract_definition) {
@@ -44,18 +43,6 @@ export const useTerms = ({
     }
   };
 
-  const openContract = async (e: React.MouseEvent) => {
-    if (!product.contract_definition) {
-      return;
-    }
-    e.stopPropagation();
-    e.preventDefault();
-    const blob = await api.contractDefinitions.previewTemplate(product.contract_definition.id);
-    // eslint-disable-next-line compat/compat
-    const file = window.URL.createObjectURL(blob);
-    window.open(file);
-  };
-
   return {
     termsAccepted,
     validateTerms,
@@ -66,12 +53,14 @@ export const useTerms = ({
             label={
               <>
                 {intl.formatMessage(messages.termsMessage)}{' '}
-                <button
-                  onClick={openContract}
+                <a
+                  href={context.site_urls.terms_and_conditions ?? '#'}
+                  target="_blank"
+                  rel="noopener noreferrer"
                   title={intl.formatMessage(messages.termsMessageLinkTitle)}
                 >
                   {intl.formatMessage(messages.termsMessageLink)}
-                </button>
+                </a>
               </>
             }
             onChange={(e) => setTermsAccepted(e.target.checked)}

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

@@ -54,6 +54,9 @@ jest.mock('utils/context', () => ({
     joanie_backend: {
       endpoint: 'https://joanie.test',
     },
+    site_urls: {
+      terms_and_conditions: '/en/about/terms-and-conditions/',
+    },
   }).one(),
 }));
 
@@ -177,7 +180,9 @@ describe.each([
         </Wrapper>,
       );
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -330,7 +335,9 @@ describe.each([
       nbApiCalls += 1; // fetch order for useProductOrder
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -455,7 +462,9 @@ describe.each([
         expect(screen.getByTestId('payment-button-order-loaded')).toBeInTheDocument();
       });
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -590,7 +599,9 @@ describe.each([
         `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
       );
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -703,7 +714,9 @@ describe.each([
       nbApiCalls += 1; // useProductOrder get order with filters
       expect(fetchMock.calls()).toHaveLength(nbApiCalls);
 
-      const $terms = screen.getByLabelText('By checking this box, you accept the');
+      const $terms = screen.getByLabelText(
+        'By checking this box, you accept the General Terms of Sale',
+      );
       await act(async () => {
         fireEvent.click($terms);
       });
@@ -802,17 +815,9 @@ describe.each([
     });
 
     it('should be able to preview the contract if product has a contract definition', async () => {
-      // eslint-disable-next-line compat/compat
-      URL.createObjectURL = jest.fn((blob) => blob) as any;
-      window.open = jest.fn();
-
       const product: Joanie.Product = ProductFactory().one();
       const billingAddress: Joanie.Address = AddressFactory().one();
 
-      const PREVIEW_URL = `https://joanie.test/api/v1.0/contract_definitions/${
-        product.contract_definition!.id
-      }/preview_template/`;
-
       const fetchOrderQueryParams =
         product.type === ProductType.CREDENTIAL
           ? {
@@ -826,12 +831,10 @@ describe.each([
               state: ['pending', 'validated', 'submitted'],
             };
 
-      fetchMock
-        .get(
-          `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
-          [],
-        )
-        .get(PREVIEW_URL, 'preview content');
+      fetchMock.get(
+        `https://joanie.test/api/v1.0/orders/?${queryString.stringify(fetchOrderQueryParams)}`,
+        [],
+      );
 
       render(
         <Wrapper client={createTestQueryClient({ user: true })} product={product}>
@@ -839,25 +842,8 @@ describe.each([
         </Wrapper>,
       );
 
-      const $terms = screen.getByRole('button', { name: 'General Terms of Sale' });
-
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledTimes(0);
-      expect(window.open).toHaveBeenCalledTimes(0);
-      expect(fetchMock.called(PREVIEW_URL)).toBe(false);
-
-      // console.log($terms);
-      await act(async () => {
-        fireEvent.click($terms);
-      });
-
-      expect(fetchMock.called(PREVIEW_URL)).toBe(true);
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledTimes(1);
-      // eslint-disable-next-line compat/compat
-      expect(URL.createObjectURL).toHaveBeenCalledWith('preview content');
-      expect(window.open).toHaveBeenCalledTimes(1);
-      expect(window.open).toHaveBeenCalledWith('preview content');
+      const $terms = screen.getByRole('link', { name: 'General Terms of Sale' });
+      expect($terms).toHaveAttribute('href', '/en/about/terms-and-conditions/');
     });
 
     it('should not show terms checkbox if the product does not have a contract definition', async () => {
@@ -959,7 +945,9 @@ describe.each([
           name: `Pay ${formatPrice(product.price, product.price_currency)}`,
         }) as HTMLButtonElement;
 
-        const $terms = screen.getByLabelText('By checking this box, you accept the');
+        const $terms = screen.getByLabelText(
+          'By checking this box, you accept the General Terms of Sale',
+        );
         await act(async () => {
           fireEvent.click($terms);
         });

package/js/types/commonDataProps.ts

@@ -31,6 +31,9 @@ export interface RichieContext {
   release: string;
   sentry_dsn: Nullable<string>;
   web_analytics_providers?: Nullable<string[]>;
+  site_urls: {
+    terms_and_conditions: Nullable<string>;
+  };
 }
 
 export interface CommonDataProps {

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

@@ -27,9 +27,10 @@ describe('CreditCardHelper', () => {
   });
 
   it('is soon expired', () => {
-    const expirationDate = faker.date.future({
-      refDate: new Date(),
-      years: 2.99 / 12,
+    const now = new Date();
+    const expirationDate = faker.date.between({
+      from: now,
+      to: new Date(now.getFullYear(), now.getMonth() + 4, 0, 23, 59, 59),
     });
 
     expect(
@@ -43,7 +44,10 @@ describe('CreditCardHelper', () => {
   });
 
   it('is expired', () => {
-    const date = faker.date.past();
+    const now = new Date();
+    const date = faker.date.past({
+      refDate: new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59),
+    });
     expect(
       CreditCardHelper.getExpirationState(
         CreditCardFactory({

package/js/utils/CreditCardHelper/index.tsx

@@ -15,16 +15,29 @@ export class CreditCardHelper {
     if (!creditCard.expiration_month || !creditCard.expiration_year) {
       return false;
     }
-    const expirationDate = new Date(creditCard.expiration_year, creditCard.expiration_month - 1, 1);
-    const limitDate = new Date();
-    limitDate.setMonth(limitDate.getMonth() + 3);
-    return limitDate.getTime() > expirationDate.getTime();
+    const expirationDate = new Date(
+      creditCard.expiration_year,
+      creditCard.expiration_month,
+      0,
+      23,
+      59,
+      59,
+    );
+    const limitDate = new Date(new Date().getFullYear(), new Date().getMonth() + 4, 0, 23, 59, 59);
+    return limitDate.getTime() >= expirationDate.getTime();
   }
 
   static isExpired(creditCard: CreditCard): boolean {
-    const expirationDate = new Date(creditCard.expiration_year, creditCard.expiration_month - 1, 1);
+    const expirationDate = new Date(
+      creditCard.expiration_year,
+      creditCard.expiration_month,
+      0,
+      23,
+      59,
+      59,
+    );
     const now = new Date();
-    return expirationDate.getTime() < now.getTime();
+    return expirationDate.getTime() <= now.getTime();
   }
 
   static getExpirationState(creditCard: CreditCard): CreditCardExpirationStatus {

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

@@ -181,6 +181,9 @@ export const RichieContextFactory = factory<CommonDataProps['context']>(() => ({
   release: faker.system.semver(),
   sentry_dsn: null,
   web_analytics_providers: null,
+  site_urls: {
+    terms_and_conditions: null,
+  },
 }));
 
 export const CourseLightFactory = factory<Course>(() => {

package/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.spec.tsx

@@ -1,11 +1,14 @@
 import { render, screen } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
 import { PropsWithChildren } from 'react';
-import { EnrollmentFactory } from 'utils/test/factories/joanie';
+import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
 import { Priority } from 'types';
-import { Enrollment } from 'types/Joanie';
-import { DATETIME_FORMAT } from 'hooks/useDateFormat';
-import { Enrolled } from './DashboardItemCourseEnrolling';
+import { CourseRun, Enrollment } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+import { noop } from 'utils';
+import { computeState } from 'utils/CourseRuns';
+import { DashboardItemCourseEnrollingRun, Enrolled } from './DashboardItemCourseEnrolling';
 
 /**
  * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
@@ -16,49 +19,109 @@ describe('<Enrolled/>', () => {
     return <IntlProvider locale="en">{children}</IntlProvider>;
   };
 
-  const runTest = async (priority: Priority, expectButton: boolean) => {
-    const enrollment: Enrollment = EnrollmentFactory().one();
-    enrollment.course_run.state.priority = priority;
-    render(<Enrolled enrollment={enrollment} />, { wrapper });
-    await screen.findByText(
-      'You are enrolled for the session from ' +
-        new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(
-          new Date(enrollment.course_run.start),
-        ) +
-        ' to ' +
-        new Intl.DateTimeFormat('en', DATETIME_FORMAT).format(new Date(enrollment.course_run.end)),
-    );
-    if (expectButton) {
-      const link = screen.getByRole('link', { name: 'Access course' });
-      expect(link).toBeEnabled();
-      expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
-    } else {
-      expect(screen.queryByRole('link', { name: 'Access course' })).toBeNull();
-    }
-  };
+  it.each([
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_OPEN,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_OPEN,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_OPEN,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_NOT_YET_OPEN,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_CLOSED,
+      expectButton: false,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_CLOSED,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_CLOSED,
+      expectButton: true,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.TO_BE_SCHEDULED,
+      expectButton: false,
+    },
+  ])(
+    'handles enrollments with priority=$priority $buttonTestLabel',
+    async ({ priority, expectButton }) => {
+      const enrollment: Enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state.priority = priority;
+      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      await screen.findByText(
+        'You are enrolled for the session from ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(enrollment.course_run.start),
+          ) +
+          ' to ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+            new Date(enrollment.course_run.end),
+          ),
+      );
+      if (expectButton) {
+        const link = screen.getByRole('link', { name: 'Access to course' });
+        expect(link).toBeEnabled();
+        expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
+      } else {
+        expect(screen.queryByRole('link', { name: 'Access to course' })).toBeNull();
+      }
+    },
+  );
+});
+
+describe('<DashboardItemCourseEnrollingRun/>', () => {
+  it.each([
+    [Priority.ONGOING_OPEN, false],
+    [Priority.FUTURE_OPEN, false],
+    [Priority.ARCHIVED_OPEN, false],
+    [Priority.FUTURE_NOT_YET_OPEN, true],
+    [Priority.FUTURE_CLOSED, false],
+    [Priority.ONGOING_CLOSED, false],
+    [Priority.ARCHIVED_CLOSED, false],
+    [Priority.TO_BE_SCHEDULED, false],
+  ])(
+    `handles correctly enrollment_start date displaying with priority=%s`,
+    async (priority, expectEnrollmentNotYetOpened) => {
+      const order = CredentialOrderFactory().one();
+      const courseRun = CourseRunFactoryFromPriority(priority)().one();
+      courseRun.state = computeState(courseRun);
+      const joanieCourseRun = courseRun as unknown as CourseRun;
+      joanieCourseRun.course = order.course;
+
+      render(
+        <IntlProvider locale="en">
+          <DashboardItemCourseEnrollingRun
+            order={order}
+            courseRun={joanieCourseRun}
+            selected={false}
+            enroll={noop}
+          />
+        </IntlProvider>,
+      );
 
-  it('handles enrollments with priority=ONGOING_OPEN', () => {
-    runTest(Priority.ONGOING_OPEN, true);
-  });
-  it('handles enrollments with priority=FUTURE_OPEN', () => {
-    runTest(Priority.FUTURE_OPEN, false);
-  });
-  it('handles enrollments with priority=ARCHIVED_OPEN', () => {
-    runTest(Priority.ARCHIVED_OPEN, true);
-  });
-  it('handles enrollments with priority=FUTURE_NOT_YET_OPEN', () => {
-    runTest(Priority.FUTURE_NOT_YET_OPEN, false);
-  });
-  it('handles enrollments with priority=FUTURE_CLOSED', () => {
-    runTest(Priority.FUTURE_CLOSED, false);
-  });
-  it('handles enrollments with priority=ONGOING_CLOSED', () => {
-    runTest(Priority.ONGOING_CLOSED, true);
-  });
-  it('handles enrollments with priority=ARCHIVED_CLOSED', () => {
-    runTest(Priority.ARCHIVED_CLOSED, true);
-  });
-  it('handles enrollments with priority=TO_BE_SCHEDULED', () => {
-    runTest(Priority.TO_BE_SCHEDULED, false);
-  });
+      if (expectEnrollmentNotYetOpened) {
+        screen.getByText(/Enrollment will open on/);
+      } else {
+        expect(screen.queryByText(/Enrollment will open on/)).not.toBeInTheDocument();
+      }
+    },
+  );
 });

package/js/widgets/Dashboard/components/DashboardItem/DashboardItemCourseEnrolling.tsx

@@ -1,15 +1,15 @@
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useMemo } from 'react';
 import { Button } from '@openfun/cunningham-react';
 import { CoursesHelper } from 'utils/CoursesHelper';
 import { Priority } from 'types';
 import {
+  AbstractCourse,
+  CertificateOrder,
   CourseRun,
-  Enrollment,
   CredentialOrder,
-  AbstractCourse,
+  Enrollment,
   Product,
-  CertificateOrder,
 } from 'types/Joanie';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
@@ -208,7 +208,7 @@ interface DashboardItemCourseEnrollingRunProps {
   product?: Product;
 }
 
-const DashboardItemCourseEnrollingRun = ({
+export const DashboardItemCourseEnrollingRun = ({
   courseRun,
   selected,
   enroll,
@@ -247,7 +247,7 @@ const DashboardItemCourseEnrollingRun = ({
             }}
           />
         </div>
-        {!isOpenedForEnrollment && (
+        {courseRun.state.priority === Priority.FUTURE_NOT_YET_OPEN && (
           <div className="dashboard-item__course-enrolling__run__not-opened">
             <FormattedMessage
               {...messages.enrollmentNotYetOpened}

package/package.json

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