richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/DashboardItem/{DashboardItemCourseEnrolling.tsx → CourseEnrolling/index.tsx}

@@ -1,17 +1,27 @@
-import { FormattedMessage } 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, CourseRun, Enrollment, Order } from 'types/Joanie';
+import {
+  AbstractCourse,
+  CertificateOrder,
+  CourseRun,
+  CredentialOrder,
+  Enrollment,
+  Product,
+} from 'types/Joanie';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import useDateFormat, { DATETIME_FORMAT } from 'hooks/useDateFormat';
-import { Button } from 'components/Button';
 import { Icon, IconTypeEnum } from 'components/Icon';
-import { RouterButton } from '../RouterButton';
-import { useEnroll } from '../../hooks/useEnroll';
 
-const messages = {
+import useDateFormat from 'hooks/useDateFormat';
+import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
+import { useEnroll } from 'widgets/Dashboard/hooks/useEnroll';
+import { OrderHelper } from 'utils/OrderHelper';
+import useCourseRunPeriodMessage from './hooks/useCourseRunPeriodMessage';
+
+const messages = defineMessages({
   notEnrolled: {
     id: 'components.DashboardItemEnrollment.notEnrolled',
     description: 'Text shown on a read-only not-enrolled target course',
@@ -31,17 +41,7 @@ const messages = {
   accessCourse: {
     id: 'components.DashboardItemEnrollment.gotoCourse',
     description: 'Button to access course when the user is enrolled',
-    defaultMessage: 'Access course',
-  },
-  runPeriod: {
-    id: 'components.DashboardItemEnrollment.runPeriod',
-    description: 'Text to display the period of a course run',
-    defaultMessage: 'From {startDate} to {endDate}',
-  },
-  enrolledRunPeriod: {
-    id: 'components.DashboardItemEnrollment.enrolledRunPeriod',
-    description: 'Text to display the period of a course run',
-    defaultMessage: 'You are enrolled for the session from {startDate} to {endDate}',
+    defaultMessage: 'Access to course',
   },
   enrolled: {
     id: 'components.DashboardItemEnrollment.enrolled',
@@ -68,13 +68,22 @@ const messages = {
     description: 'Text displayed when course runs list is loading',
     id: 'components.DashboardItemCourseEnrollingRun.courseRunsLoading',
   },
-};
+  contractUnsigned: {
+    id: 'components.DashboardItemCourseEnrollingRun.contractUnsigned',
+    description: 'Message displayed as disabled button title when a contract needs to be signed.',
+    defaultMessage: 'You have to sign the training contract before enrolling to your course.',
+  },
+});
 
-interface Props {
+interface DashboardItemCourseEnrollingProps {
+  // how does it work ?!!
+  // course should be a code from api serializer
   course: AbstractCourse;
   activeEnrollment?: Enrollment;
-  order?: Order;
-  writable?: boolean;
+  order?: CredentialOrder;
+  product?: Product;
+  writable: boolean;
+  hideEnrollButtons?: boolean;
   icon?: boolean;
   notEnrolledUrl?: string;
 }
@@ -84,9 +93,11 @@ export const DashboardItemCourseEnrolling = ({
   activeEnrollment,
   writable,
   order,
+  product,
   icon = false,
   notEnrolledUrl = '#',
-}: Props) => {
+  hideEnrollButtons,
+}: DashboardItemCourseEnrollingProps) => {
   if (writable && !order) {
     throw new Error('Order is required when writable is true');
   }
@@ -97,7 +108,11 @@ export const DashboardItemCourseEnrolling = ({
           {activeEnrollment ? (
             <Enrolled icon={icon} enrollment={activeEnrollment} />
           ) : (
-            <NotEnrolled icon={icon} notEnrolledUrl={notEnrolledUrl} />
+            <NotEnrolled
+              icon={icon}
+              notEnrolledUrl={notEnrolledUrl}
+              hideEnrollButtons={hideEnrollButtons}
+            />
           )}
         </div>
       )}
@@ -106,25 +121,30 @@ export const DashboardItemCourseEnrolling = ({
           course={course}
           enrollments={CoursesHelper.findCourseEnrollmentsInOrder(course, order)}
           order={order}
+          product={product}
         />
       )}
     </div>
   );
 };
 
+interface DashboardItemCourseEnrollingRunsProps {
+  course: AbstractCourse;
+  enrollments: Enrollment[];
+  order?: CredentialOrder;
+  product?: Product;
+}
+
 const DashboardItemCourseEnrollingRuns = ({
   course,
   enrollments,
   order,
-}: {
-  course: AbstractCourse;
-  enrollments: Enrollment[];
-  order?: Order;
-}) => {
+  product,
+}: DashboardItemCourseEnrollingRunsProps) => {
   const { enroll, isLoading, error } = useEnroll(enrollments, order);
 
   // Hide runs with finished enrollment.
-  const datas = useMemo(() => {
+  const courseRunOpenForEnrollmentList = useMemo(() => {
     const activeEnrollment = CoursesHelper.findActiveEnrollment(course, enrollments);
     return course.course_runs
       .map((courseRun) => ({
@@ -132,6 +152,9 @@ const DashboardItemCourseEnrollingRuns = ({
         selected: activeEnrollment?.course_run.id === courseRun.id,
       }))
       .filter(
+        // FIXME(rlecellier): question!
+        // does that mean the we hide the enrollment when user cannot enroll?
+        // even if he's already enrolled ?
         (data) => data.selected || data.courseRun.state.priority <= Priority.FUTURE_NOT_YET_OPEN,
       );
   }, [course, enrollments]);
@@ -140,18 +163,20 @@ const DashboardItemCourseEnrollingRuns = ({
   return (
     <div className="dashboard-item__course-enrolling__runs">
       {error && <Banner message={error} type={BannerType.ERROR} />}
-      {datas.length === 0 && (
+      {courseRunOpenForEnrollmentList.length === 0 && (
         <div className="dashboard-item__course-enrolling__no-runs">
           <Icon name={IconTypeEnum.WARNING} size="small" />
           <FormattedMessage {...messages.noCourseRunAvailable} />
         </div>
       )}
-      {datas.map((data) => (
+      {courseRunOpenForEnrollmentList.map((data) => (
         <DashboardItemCourseEnrollingRun
           key={data.courseRun.id}
           courseRun={data.courseRun}
           selected={data.selected}
           enroll={() => enroll(data.courseRun)}
+          order={order}
+          product={product}
         />
       ))}
       {isLoading && (
@@ -170,20 +195,32 @@ const DashboardItemCourseEnrollingRuns = ({
   );
 };
 
-const DashboardItemCourseEnrollingRun = ({
-  courseRun,
-  selected,
-  enroll,
-}: {
+interface DashboardItemCourseEnrollingRunProps {
   courseRun: CourseRun;
   selected: boolean;
   enroll: () => void;
-}) => {
+  order?: CredentialOrder | CertificateOrder;
+  product?: Product;
+}
+
+export const DashboardItemCourseEnrollingRun = ({
+  courseRun,
+  selected,
+  enroll,
+  order,
+  product,
+}: DashboardItemCourseEnrollingRunProps) => {
+  const intl = useIntl();
   const formatDate = useDateFormat();
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(courseRun, selected);
+  const haveToSignContract = order
+    ? OrderHelper.orderNeedsSignature(order, product?.contract_definition)
+    : false;
   const isOpenedForEnrollment = useMemo(
     () => courseRun.state.priority < Priority.FUTURE_NOT_YET_OPEN,
     [courseRun],
   );
+
   return (
     <div
       className="dashboard-item__course-enrolling__run"
@@ -191,16 +228,20 @@ const DashboardItemCourseEnrollingRun = ({
     >
       <div>
         <div>
-          <FormattedMessage
-            {...messages.runPeriod}
-            values={{
-              startDate: formatDate(courseRun.start, DATETIME_FORMAT),
-              endDate: formatDate(courseRun.end, DATETIME_FORMAT),
-            }}
-          />
+          <p className="dashboard-item__course-enrolling__run_title">
+            {selected && (
+              <Icon
+                className="dashboard-item__course-enrolling__run__icon-enrolled"
+                name={IconTypeEnum.CHECK}
+              />
+            )}
+            <strong>{courseRun.title}</strong>
+          </p>
+          {courseRunPeriodMessage}
         </div>
-        {!isOpenedForEnrollment && (
+        {courseRun.state.priority === Priority.FUTURE_NOT_YET_OPEN && (
           <div className="dashboard-item__course-enrolling__run__not-opened">
+            -{' '}
             <FormattedMessage
               {...messages.enrollmentNotYetOpened}
               values={{ enrollment_start: formatDate(courseRun.enrollment_start) }}
@@ -208,41 +249,68 @@ const DashboardItemCourseEnrollingRun = ({
           </div>
         )}
       </div>
-      <div>
-        {selected ? (
-          <div className="dashboard-item__course-enrolling__run__enrolled">
-            <FormattedMessage {...messages.enrolled} />
-            <Icon name={IconTypeEnum.CHECK} size="small" />
+      {selected ? (
+        SHOW_ACCESS_COURSE_PRIORITIES.includes(courseRun.state.priority) && (
+          <div>
+            <Button
+              color="secondary"
+              size="small"
+              href={courseRun.resource_link}
+              data-testid="dashboard-item-enrollment__button"
+              className="dashboard-item__button"
+            >
+              <FormattedMessage {...messages.accessCourse} />
+            </Button>
           </div>
-        ) : (
-          <Button disabled={!isOpenedForEnrollment} color="outline-primary" onClick={enroll}>
+        )
+      ) : (
+        <div>
+          <Button
+            disabled={!isOpenedForEnrollment || haveToSignContract}
+            color="tertiary"
+            size="small"
+            onClick={enroll}
+            title={haveToSignContract ? intl.formatMessage(messages.contractUnsigned) : ''}
+          >
             <FormattedMessage {...messages.enrollRun} />
           </Button>
-        )}
-      </div>
+        </div>
+      )}
     </div>
   );
 };
 
-const NotEnrolled = ({ icon, notEnrolledUrl }: { icon: boolean; notEnrolledUrl: string }) => {
+const NotEnrolled = ({
+  icon,
+  notEnrolledUrl,
+  hideEnrollButtons,
+}: {
+  icon: boolean;
+  notEnrolledUrl: string;
+  hideEnrollButtons?: boolean;
+}) => {
   return (
     <>
       <div className="dashboard-item__block__status">
         {icon && <Icon name={IconTypeEnum.SCHOOL} />}
         <FormattedMessage {...messages.notEnrolled} />
       </div>
-      <RouterButton
-        color="outline-primary"
-        href={notEnrolledUrl}
-        data-testid="dashboard-item-enrollment__button"
-      >
-        <FormattedMessage {...messages.enrollCourse} />
-      </RouterButton>
+      {!hideEnrollButtons && (
+        <RouterButton
+          color="secondary"
+          size="small"
+          href={notEnrolledUrl}
+          data-testid="dashboard-item-enrollment__button"
+          className="dashboard-item__button"
+        >
+          <FormattedMessage {...messages.enrollCourse} />
+        </RouterButton>
+      )}
     </>
   );
 };
 
-const SHOW_ACCESS_COURSE_PRIORITIES = [
+export const SHOW_ACCESS_COURSE_PRIORITIES = [
   Priority.ONGOING_OPEN,
   Priority.ARCHIVED_OPEN,
   Priority.ONGOING_CLOSED,
@@ -256,17 +324,24 @@ export const Enrolled = ({
   icon?: boolean;
   enrollment: Enrollment;
 }) => {
+  const courseRunPeriodMessage = useCourseRunPeriodMessage(enrollment.course_run, true);
   return (
     <>
       <div className="dashboard-item__block__status">
         {icon && <Icon name={IconTypeEnum.SCHOOL} />}
-        <EnrolledStatus enrollment={enrollment} />
+        {enrollment.is_active ? (
+          courseRunPeriodMessage
+        ) : (
+          <FormattedMessage {...messages.statusNotActive} />
+        )}
       </div>
       {SHOW_ACCESS_COURSE_PRIORITIES.includes(enrollment.course_run.state.priority) && (
         <Button
-          color="outline-primary"
+          color="secondary"
+          size="small"
           href={enrollment.course_run.resource_link}
           data-testid="dashboard-item-enrollment__button"
+          className="dashboard-item__button"
         >
           <FormattedMessage {...messages.accessCourse} />
         </Button>
@@ -274,21 +349,3 @@ export const Enrolled = ({
     </>
   );
 };
-
-const EnrolledStatus = ({ enrollment }: { enrollment: Enrollment }) => {
-  const formatDate = useDateFormat();
-
-  if (!enrollment.is_active) {
-    return <FormattedMessage {...messages.statusNotActive} />;
-  }
-
-  return (
-    <FormattedMessage
-      {...messages.enrolledRunPeriod}
-      values={{
-        startDate: formatDate(enrollment.course_run.start, DATETIME_FORMAT),
-        endDate: formatDate(enrollment.course_run.end, DATETIME_FORMAT),
-      }}
-    />
-  );
-};

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.spec.tsx

@@ -1,14 +1,38 @@
 import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import { faker } from '@faker-js/faker';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { Enrollment } from 'types/Joanie';
-import { CourseStateFactory } from 'utils/test/factories/richie';
+import {
+  CourseStateFactory,
+  RichieContextFactory as mockRichieContextFactory,
+} from 'utils/test/factories/richie';
 import { CourseRunWithCourseFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
-import { DATETIME_FORMAT } from 'hooks/useDateFormat';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import { Priority } from 'types';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
 import { DashboardItemEnrollment } from './DashboardItemEnrollment';
 
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
+  }).one(),
+}));
+
 describe('<DashboardItemEnrollment/>', () => {
+  const Wrapper = ({ enrollment }: { enrollment: Enrollment }) => (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient()}>
+        <JoanieSessionProvider>
+          <DashboardItemEnrollment enrollment={enrollment} />
+        </JoanieSessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+
   it('renders a opened enrollment', () => {
     const enrollment: Enrollment = EnrollmentFactory({
       course_run: CourseRunWithCourseFactory({
@@ -20,25 +44,20 @@ describe('<DashboardItemEnrollment/>', () => {
     }).one();
     enrollment.course_run.state.priority = Priority.ONGOING_OPEN;
 
-    render(
-      <IntlProvider locale="en">
-        <DashboardItemEnrollment enrollment={enrollment} />
-      </IntlProvider>,
-    );
+    render(<Wrapper enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
-    const link = screen.getByRole('link', { name: 'Access course' });
+    const link = screen.getByRole('link', { name: 'Access to course' });
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
 
-    screen.getByText(
-      '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)),
+    const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.start),
     );
+    const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+      new Date(enrollment.course_run.end),
+    );
+    screen.getByText(`You are enrolled for this session. It's open from ${fromDate} to ${toDate}`);
   });
 
   it('renders a closed enrollment', () => {
@@ -52,38 +71,22 @@ describe('<DashboardItemEnrollment/>', () => {
       }).one(),
     }).one();
 
-    render(
-      <IntlProvider locale="en">
-        <DashboardItemEnrollment enrollment={enrollment} />
-      </IntlProvider>,
-    );
+    render(<Wrapper enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
-    const link = screen.getByRole('link', { name: 'Access course' });
+    const link = screen.getByRole('link', { name: 'Access to course' });
     expect(link).toBeEnabled();
     expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
-    screen.getByText(
-      '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)),
-    );
+    expect(screen.getByText(/You are enrolled for this session./)).toBeInTheDocument();
   });
 
   it('renders an inactive enrollment', () => {
-    const enrollment: Enrollment = {
-      ...EnrollmentFactory().one(),
+    const enrollment: Enrollment = EnrollmentFactory({
       is_active: false,
       course_run: CourseRunWithCourseFactory().one(),
-    };
+    }).one();
 
-    render(
-      <IntlProvider locale="en">
-        <DashboardItemEnrollment enrollment={enrollment} />
-      </IntlProvider>,
-    );
+    render(<Wrapper enrollment={enrollment} />);
     screen.getByText(enrollment.course_run.course!.title);
     screen.getByText('Ref. ' + enrollment.course_run.course!.code);
     screen.getByText('Not enrolled');

package/js/widgets/Dashboard/components/DashboardItem/Enrollment/DashboardItemEnrollment.tsx

@@ -1,6 +1,8 @@
-import { Enrollment } from 'types/Joanie';
-import { DashboardItemCourseEnrolling } from '../DashboardItemCourseEnrolling';
+import { useMemo } from 'react';
+import { Enrollment, isCertificateProduct } from 'types/Joanie';
+import { Enrolled } from '../CourseEnrolling';
 import { DashboardItem } from '..';
+import ProductCertificateFooter from './ProductCertificateFooter';
 
 interface DashboardItemCourseRunProps {
   enrollment: Enrollment;
@@ -11,14 +13,30 @@ export const DashboardItemEnrollment = ({ enrollment }: DashboardItemCourseRunPr
   if (!course) {
     throw new Error("Enrollment's course_run must provide course attribute");
   }
-
-  return (
-    <DashboardItem
-      title={course.title}
-      code={'Ref. ' + course.code}
-      footer={
-        <DashboardItemCourseEnrolling course={course} activeEnrollment={enrollment} icon={true} />
+  const footerList = useMemo(() => {
+    const partialFooterList = [
+      <div
+        key={`${enrollment.id}_enrolled_footer`}
+        data-testid={'dashboard-item__course-enrolling__' + course.code}
+      >
+        <div className="dashboard-item__course-enrolling__infos">
+          <Enrolled icon={true} enrollment={enrollment} />
+        </div>
+      </div>,
+    ];
+    enrollment.product_relations.forEach(({ product }) => {
+      if (isCertificateProduct(product)) {
+        partialFooterList.push(
+          <ProductCertificateFooter
+            key={[enrollment.id, product.id].join('_')}
+            product={product}
+            enrollment={enrollment}
+          />,
+        );
       }
-    />
-  );
+    });
+    return partialFooterList;
+  }, [enrollment, course]);
+
+  return <DashboardItem title={course.title} code={'Ref. ' + course.code} footer={footerList} />;
 };