richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCertificateItem/index.tsx

@@ -1,4 +1,5 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import type * as Joanie from 'types/Joanie';
 import { useDownloadCertificate } from 'hooks/useDownloadCertificate';
@@ -36,7 +37,7 @@ const CertificateItem = ({ certificateDefinition, order }: Props) => {
   const { download, loading } = useDownloadCertificate();
 
   const onDownloadClick = async () => {
-    await download(order!.certificate!);
+    await download(order!.certificate_id!);
   };
 
   return (
@@ -47,14 +48,10 @@ const CertificateItem = ({ certificateDefinition, order }: Props) => {
       <div>
         <strong className="product-widget__item-title h5">{certificateDefinition.title}</strong>
         <p className="product-widget__item-description">
-          {order?.certificate ? (
+          {order?.certificate_id ? (
             <>
               <FormattedMessage {...messages.congratulations} />
-              <button
-                disabled={loading}
-                className="button button--primary button--pill"
-                onClick={onDownloadClick}
-              >
+              <Button disabled={loading} onClick={onDownloadClick}>
                 {loading ? (
                   <Spinner theme="light" aria-labelledby="generating-certificate">
                     <span id="generating-certificate">
@@ -64,7 +61,7 @@ const CertificateItem = ({ certificateDefinition, order }: Props) => {
                 ) : (
                   <FormattedMessage {...messages.download} />
                 )}
-              </button>
+              </Button>
             </>
           ) : (
             certificateDefinition.description || (

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCourseRuns/CourseRunList.tsx

@@ -4,7 +4,7 @@ import { Icon, IconTypeEnum } from 'components/Icon';
 import type * as Joanie from 'types/Joanie';
 import useDateFormat from 'hooks/useDateFormat';
 import { IntlHelper } from 'utils/IntlHelper';
-import EnrollmentDate from 'widgets/CourseProductItem/components/EnrollmentDate';
+import EnrollmentDate from 'components/EnrollmentDate';
 import { messages as sharedMessages } from '../CourseRunItem';
 import CourseRunSection, { messages as sectionMessages } from './CourseRunSection';
 

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx

@@ -1,5 +1,6 @@
 import { Children, type FormEventHandler, useMemo, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Button } from '@openfun/cunningham-react';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { Spinner } from 'components/Spinner';
 import { useEnrollments } from 'hooks/useEnrollments';
@@ -9,7 +10,9 @@ import type { Maybe } from 'types/utils';
 import useDateFormat from 'hooks/useDateFormat';
 import { IntlHelper } from 'utils/IntlHelper';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
-import EnrollmentDate from 'widgets/CourseProductItem/components/EnrollmentDate';
+import EnrollmentDate from 'components/EnrollmentDate';
+import { Product } from 'types/Joanie';
+import { OrderHelper } from 'utils/OrderHelper';
 import { messages as sharedMessages } from '../CourseRunItem';
 import CourseRunSection, { messages as sectionMessages } from './CourseRunSection';
 
@@ -49,13 +52,17 @@ const messages = defineMessages({
 
 interface Props {
   courseRuns: Joanie.CourseRun[];
-  order: Joanie.OrderLite;
+  order: Joanie.Order;
+  product: Product;
 }
 
-const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
+const EnrollableCourseRunList = ({ courseRuns, order, product }: Props) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
   const formRef = useRef<HTMLFormElement>(null);
+  const needsSignature = order
+    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
+    : false;
 
   const [selectedCourseRun, setSelectedCourseRun] = useState<Maybe<Joanie.CourseRun>>();
   const [submitted, setSubmitted] = useState(false);
@@ -101,20 +108,20 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
 
     if (selectedCourseRun) {
       WebAnalyticsAPIHandler()?.sendEnrolledEvent(selectedCourseRun.resource_link);
-      const relatedEnrollment = order.enrollments.find(({ course_run }) => {
+      const relatedEnrollment = order.target_enrollments.find(({ course_run }) => {
         return course_run.id === selectedCourseRun.id;
       });
       if (relatedEnrollment) {
         await enrollment.methods.update({
           is_active: true,
-          course_run: selectedCourseRun.id,
+          course_run_id: selectedCourseRun.id,
           id: relatedEnrollment.id,
           was_created_by_order: true,
         });
       } else {
         await enrollment.methods.create({
           is_active: true,
-          course_run: selectedCourseRun.id,
+          course_run_id: selectedCourseRun.id,
           was_created_by_order: true,
         });
       }
@@ -142,6 +149,7 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
                   type="radio"
                   id={`${order.id}|${courseRun.id}`}
                   name={order.id}
+                  disabled={needsSignature}
                   aria-label={intl.formatMessage(messages.ariaSelectCourseRun, {
                     start: formatDate(courseRun.start),
                     end: formatDate(courseRun.end),
@@ -217,7 +225,7 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
                 <FormattedMessage {...messages.selectCourseRun} />
               ))}
           </span>
-          <button className="course-runs-item__cta button--primary button--pill button--tiny">
+          <Button size="small" className="course-runs-item__cta" disabled={needsSignature}>
             {loading ? (
               <Spinner theme="light" aria-labelledby="enrolling">
                 <span id="enrolling">
@@ -227,7 +235,7 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
             ) : (
               <FormattedMessage {...messages.enroll} />
             )}
-          </button>
+          </Button>
         </div>
       </form>
     </CourseRunSection>

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCourseRuns/EnrolledCourseRun.tsx

@@ -1,5 +1,6 @@
 import { defineMessages, FormattedMessage } from 'react-intl';
 import { useMemo } from 'react';
+import { Button } from '@openfun/cunningham-react';
 import { useEnrollments } from 'hooks/useEnrollments';
 import type * as Joanie from 'types/Joanie';
 import useDateFormat from 'hooks/useDateFormat';
@@ -88,12 +89,13 @@ const EnrolledCourseRun = ({ enrollment }: Props) => {
         )}
         <div className="course-runs-item">
           {isStarded && (
-            <a
+            <Button
+              size="small"
               href={enrollment.course_run.resource_link}
-              className="course-runs-item__cta button--primary button--pill button--tiny"
+              className="course-runs-item__cta"
             >
               <FormattedMessage {...messages.goToCourse} />
-            </a>
+            </Button>
           )}
 
           {!isStarded && (

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCourseRuns/_styles.scss

@@ -121,6 +121,7 @@
     .course-runs-item__cta {
       padding: 0.5rem 1rem;
       min-width: 100px;
+      justify-content: center;
     }
 
     .course-runs-item__enrolled {

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseProductCourseRuns/index.spec.tsx

@@ -9,15 +9,16 @@ import {
   CourseLightFactory,
   CourseRunFactory,
   EnrollmentFactory,
-  OrderFactory,
+  CredentialOrderFactory,
+  ProductFactory,
 } from 'utils/test/factories/joanie';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
-import type { CourseLight, CourseRun, Enrollment, OrderLite } from 'types/Joanie';
+import type { CourseLight, CourseRun, Enrollment } from 'types/Joanie';
 import { Deferred } from 'utils/test/deferred';
 import { CourseStateTextEnum, Priority } from 'types';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { IntlHelper } from 'utils/IntlHelper';
-import { CourseProductProvider } from '../../contexts/CourseProductContext';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { CourseRunList, EnrollableCourseRunList, EnrolledCourseRun } from '.';
 
 jest.mock('utils/context', () => ({
@@ -117,26 +118,21 @@ describe('CourseProductCourseRuns', () => {
   });
 
   describe('EnrollableCourseRunList', () => {
-    const Wrapper = ({
-      productId,
-      code,
-      children,
-    }: PropsWithChildren<{ productId: string; code: string }>) => (
+    const Wrapper = ({ children }: PropsWithChildren) => (
       <IntlProvider locale="en">
-        <CourseProductProvider productId={productId} courseCode={code}>
-          <QueryClientProvider client={createTestQueryClient()}>
-            <JoanieApiProvider>{children}</JoanieApiProvider>
-          </QueryClientProvider>
-        </CourseProductProvider>
+        <QueryClientProvider client={createTestQueryClient()}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
       </IntlProvider>
     );
 
     it('renders a warning message when no course runs are provided', () => {
-      const order: OrderLite = OrderFactory().one();
+      const order = CredentialOrderFactory().one();
+      const product = ProductFactory().one();
 
       render(
-        <Wrapper productId={order.product} code="00000">
-          <EnrollableCourseRunList courseRuns={[]} order={order} />
+        <Wrapper>
+          <EnrollableCourseRunList courseRuns={[]} order={order} product={product} />
         </Wrapper>,
       );
 
@@ -144,13 +140,15 @@ describe('CourseProductCourseRuns', () => {
     });
 
     it('renders a list of course runs with a call to action to enroll', async () => {
-      const course: CourseLight = CourseLightFactory().one();
       const courseRuns: CourseRun[] = CourseRunFactory().many(2);
-      const order: OrderLite = OrderFactory().one();
+      const order = CredentialOrderFactory().one();
+      const product = ProductFactory({
+        contract_definition: undefined,
+      }).one();
 
       render(
-        <Wrapper productId={order.product} code={course.code}>
-          <EnrollableCourseRunList courseRuns={courseRuns} order={order} />
+        <Wrapper>
+          <EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />
         </Wrapper>,
       );
 
@@ -240,7 +238,7 @@ describe('CourseProductCourseRuns', () => {
       screen.getByRole('status', { name: 'Enrolling...' });
 
       await act(async () => {
-        enrollmentDeferred.resolve(200);
+        enrollmentDeferred.resolve(HttpStatusCode.OK);
       });
 
       const calls = fetchMock.calls();
@@ -249,7 +247,7 @@ describe('CourseProductCourseRuns', () => {
       expect(calls[0][0]).toBe('https://joanie.test/api/v1.0/enrollments/');
       expect(JSON.parse(fetchMock.calls()[0][1]!.body as string)).toEqual({
         is_active: true,
-        course_run: courseRuns[0].id,
+        course_run_id: courseRuns[0].id,
         was_created_by_order: true,
       });
     });
@@ -257,12 +255,14 @@ describe('CourseProductCourseRuns', () => {
     it('enroll with errors', async () => {
       const course: CourseLight = CourseLightFactory().one();
       const courseRuns: CourseRun[] = CourseRunFactory().many(2);
-      const order: OrderLite = OrderFactory().one();
-      fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/`, 200);
+      const order = CredentialOrderFactory().one();
+      const product = ProductFactory().one();
+      product.contract_definition = undefined;
+      fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/`, HttpStatusCode.OK);
 
       render(
-        <Wrapper productId={order.product} code={course.code}>
-          <EnrollableCourseRunList courseRuns={courseRuns} order={order} />
+        <Wrapper>
+          <EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />
         </Wrapper>,
       );
 
@@ -343,7 +343,7 @@ describe('CourseProductCourseRuns', () => {
       screen.getByRole('status', { name: 'Enrolling...' });
 
       await act(async () => {
-        enrollmentDeferred.resolve(500);
+        enrollmentDeferred.resolve(HttpStatusCode.INTERNAL_SERVER_ERROR);
       });
 
       await screen.findByText(
@@ -370,11 +370,13 @@ describe('CourseProductCourseRuns', () => {
           text: CourseStateTextEnum.STARTING_ON,
         },
       }).one();
-      const order = OrderFactory().one();
+      const product = ProductFactory().one();
+      product.contract_definition = undefined;
+      const order = CredentialOrderFactory().one();
 
       render(
-        <Wrapper productId={order.product} code="00000">
-          <EnrollableCourseRunList courseRuns={[courseRun]} order={order} />
+        <Wrapper>
+          <EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />
         </Wrapper>,
       );
 
@@ -432,16 +434,79 @@ describe('CourseProductCourseRuns', () => {
       expect(document.activeElement).toEqual(error);
       expect($button.disabled).toBe(false);
     });
+
+    it('does not allow to enroll if a contract needs to be signed', async () => {
+      const courseRun: CourseRun = CourseRunFactory({
+        enrollment_start: faker.date.past({ years: 0.25 }).toISOString(),
+        enrollment_end: faker.date.future({ years: 0.5 }).toISOString(),
+        start: faker.date.future({ years: 0.75 }).toISOString(),
+        end: faker.date.future({ years: 1.0 }).toISOString(),
+        state: {
+          priority: faker.helpers.arrayElement([
+            Priority.FUTURE_NOT_YET_OPEN,
+            Priority.FUTURE_CLOSED,
+            Priority.ONGOING_CLOSED,
+            Priority.ARCHIVED_CLOSED,
+            Priority.TO_BE_SCHEDULED,
+          ]),
+          datetime: faker.date.future({ years: 0.25 }).toISOString(),
+          call_to_action: undefined,
+          text: CourseStateTextEnum.STARTING_ON,
+        },
+      }).one();
+      const product = ProductFactory().one();
+      const order = CredentialOrderFactory().one();
+
+      render(
+        <Wrapper>
+          <EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />
+        </Wrapper>,
+      );
+
+      // the list should contain only the course run items, without the call to action button
+      expect(screen.getAllByRole('listitem')).toHaveLength(1);
+
+      // For each course run, it should render course, enrollment dates and a checkbox input
+      // to select the course run
+      // - Course run start date should be displayed
+      const $startDate = screen.getByTestId(`course-run-${courseRun.id}-start-date`);
+      expect($startDate.textContent).toEqual(dateFormatter.format(new Date(courseRun.start)));
+
+      // - Course run end date should be displayed
+      const $endDate = screen.getByTestId(`course-run-${courseRun.id}-end-date`);
+      expect($endDate.textContent).toEqual(dateFormatter.format(new Date(courseRun.end)));
+
+      // - Course run enrollment dates should be displayed
+      const $enrollmentDates = screen.getByTestId(`course-run-${courseRun.id}-enrollment-dates`);
+      expect($enrollmentDates.textContent).toEqual(
+        `Enrollment until ${dateFormatter.format(new Date(courseRun.enrollment_end))}`,
+      );
+
+      // - A radio input
+      const $radio: HTMLInputElement = screen.getByRole('radio', {
+        name: `Select course run from ${dateFormatter.format(
+          new Date(courseRun.start),
+        )} to ${dateFormatter.format(new Date(courseRun.end))}.`,
+      });
+
+      // The radio should be disabled as a contract needs to be signed.
+      expect($radio).toBeDisabled();
+
+      // A call to action should be displayed when no course run is selected
+      const $button: HTMLButtonElement = screen.getByRole('button', {
+        name: 'Enroll',
+      });
+      // it should be enabled already to allow early user feedback
+      expect($button.disabled).toBe(true);
+    });
   });
 
   describe('EnrolledCourseRun', () => {
     const Wrapper = ({ children }: PropsWithChildren<{}>) => (
       <IntlProvider locale="en">
-        <CourseProductProvider productId="abc" courseCode="00000">
-          <QueryClientProvider client={createTestQueryClient()}>
-            <JoanieApiProvider>{children}</JoanieApiProvider>
-          </QueryClientProvider>
-        </CourseProductProvider>
+        <QueryClientProvider client={createTestQueryClient()}>
+          <JoanieApiProvider>{children}</JoanieApiProvider>
+        </QueryClientProvider>
       </IntlProvider>
     );
 

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseRunItem/index.spec.tsx

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker';
 import { screen, getByText, render } from '@testing-library/react';
-import { OrderFactory } from 'utils/test/factories/joanie';
-import type { CourseRun, Order } from 'types/Joanie';
+import { CredentialOrderFactory, ProductFactory } from 'utils/test/factories/joanie';
+import type { CourseRun, CredentialOrder } from 'types/Joanie';
 import { OrderState } from 'types/Joanie';
 import CourseRunItem from '.';
 
@@ -13,12 +13,15 @@ jest.mock('../CourseProductCourseRuns', () => ({
 
 describe('CourseRunItem', () => {
   it('does not allow user which purchase the product to enroll to course if order state is not validated', async () => {
-    const order: Order = OrderFactory({
+    const order: CredentialOrder = CredentialOrderFactory({
       state: faker.helpers.arrayElement([OrderState.CANCELED, OrderState.PENDING]),
     }).one();
+    const product = ProductFactory().one();
+    product.contract_definition = undefined;
+
     const targetCourse = order.target_courses[0];
 
-    render(<CourseRunItem targetCourse={targetCourse} order={order} />);
+    render(<CourseRunItem targetCourse={targetCourse} order={order} product={product} />);
 
     // - It should render CourseRunList component
     const $item = screen.getByTestId(`course-item-${targetCourse.code}`);

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseRunItem/index.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CredentialOrderFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { UserFactory } from 'utils/test/factories/richie';
+import CourseRunItem from '.';
+
+export default {
+  component: CourseRunItem,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  render: (args) => {
+    return StorybookHelper.wrapInApp(
+      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
+        <CourseRunItem {...args} />
+      </QueryClientProvider>,
+    );
+  },
+} as Meta<typeof CourseRunItem>;
+
+type Story = StoryObj<typeof CourseRunItem>;
+
+export const Default: Story = {
+  args: {
+    targetCourse: TargetCourseFactory().one(),
+    order: CredentialOrderFactory({
+      certificate_id: "Demo User's certificate for cours Demo Course",
+    }).one(),
+  },
+};

package/js/widgets/{CourseProductItem → SyllabusCourseRunsList/components/CourseProductItem}/components/CourseRunItem/index.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 import { defineMessages } from 'react-intl';
 import { Priority } from 'types';
 import type * as Joanie from 'types/Joanie';
-import { OrderState } from 'types/Joanie';
+import { OrderState, Product } from 'types/Joanie';
 import { CoursesHelper } from 'utils/CoursesHelper';
 import {
   CourseRunList,
@@ -25,10 +25,11 @@ other {Languages:}
 
 interface Props {
   targetCourse: Joanie.TargetCourse;
-  order?: Joanie.Order;
+  order?: Joanie.CredentialOrder;
+  product: Product;
 }
 
-const CourseRunItem = ({ targetCourse, order }: Props) => {
+const CourseRunItem = ({ targetCourse, order, product }: Props) => {
   const isEnrollable = order?.state === OrderState.VALIDATED;
   const courseRunEnrollment = isEnrollable
     ? CoursesHelper.findActiveCourseEnrollmentInOrder(targetCourse, order)
@@ -92,6 +93,7 @@ const CourseRunItem = ({ targetCourse, order }: Props) => {
         <EnrollableCourseRunList
           courseRuns={targetCourse.course_runs.filter(isOpenedCourseRun)}
           order={order}
+          product={product}
         />
       )}
       {isEnrollable && isEnrolled && <EnrolledCourseRun enrollment={courseRunEnrollment} />}

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

@@ -0,0 +1,40 @@
+import { Button } from '@openfun/cunningham-react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Banner, { BannerType } from 'components/Banner';
+import { getDashboardBasename } from 'widgets/Dashboard/hooks/useDashboardRouter/getDashboardBasename';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { Order } from 'types/Joanie';
+import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
+
+const messages = defineMessages({
+  signatureNeeded: {
+    defaultMessage: 'You need to sign your training contract before enrolling to course runs',
+    description: 'Banner displayed when the contract is not signed on the syllabus',
+    id: 'components.CourseProductItem.signatureNeeded',
+  },
+  contractSignActionLabel: {
+    id: 'components.CourseProductItem.contractSignActionLabel',
+    description: 'Label of "sign contract" action on the syllabus.',
+    defaultMessage: 'Sign your training contract',
+  },
+});
+
+export const ProductSignatureHeader = ({ order }: { order?: Order }) => {
+  const intl = useIntl();
+  return (
+    <>
+      <Banner message={intl.formatMessage(messages.signatureNeeded)} type={BannerType.ERROR} />
+      <Button
+        fullWidth={true}
+        className="mb-s"
+        size="small"
+        href={
+          getDashboardBasename(intl.locale) +
+          getDashboardRoutePath(intl)(LearnerDashboardPaths.ORDER, { orderId: order!.id })
+        }
+      >
+        <FormattedMessage {...messages.contractSignActionLabel} />
+      </Button>
+    </>
+  );
+};