richie-education 2.28.2-dev26 → 2.28.2-dev53

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.spec.tsx

@@ -1,11 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import { screen } from '@testing-library/react';
 import { createIntl } from 'react-intl';
-import {
-  ContractDefinitionFactory,
-  ContractFactory,
-  CredentialOrderFactory,
-} from 'utils/test/factories/joanie';
+import { ContractFactory, CredentialOrderFactory } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
 import { render } from 'utils/test/render';
 import { IntlWrapper } from 'utils/test/wrappers/IntlWrapper';
@@ -15,100 +11,49 @@ const intl = createIntl({ locale: 'en' });
 
 describe('<OrderStateTeacherMessage/>', () => {
   it.each([
-    [OrderState.DRAFT, 'Pending'],
-    [OrderState.SUBMITTED, 'Pending'],
-    [OrderState.PENDING, 'Pending'],
+    [OrderState.ASSIGNED, 'Pending'],
     [OrderState.CANCELED, 'Canceled'],
-  ])(
-    'should display message from order state: %s when order have no contract',
-    (state, expectedMessage) => {
-      const order = CredentialOrderFactory({ state }).one();
-      render(<OrderStateTeacherMessage order={order} />, {
-        wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-      });
-      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
-    },
-  );
-
-  it.each([
+    [OrderState.COMPLETED, 'On going'],
     [OrderState.DRAFT, 'Pending'],
-    [OrderState.SUBMITTED, 'Pending'],
-    [OrderState.PENDING, 'Pending'],
-    [OrderState.CANCELED, 'Canceled'],
-  ])(
-    'should display message from order state: %s when order have contract',
-    (state, expectedMessage) => {
-      const orderWithContract = CredentialOrderFactory({
-        state,
-        contract: ContractFactory().one(),
-      }).one();
-      render(
-        <OrderStateTeacherMessage
-          order={orderWithContract}
-          contractDefinition={ContractDefinitionFactory().one()}
-        />,
-        {
-          wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-        },
-      );
-      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
-    },
-  );
-
-  it('should display message for validated order that need learner signature', () => {
-    const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      contract: null,
-    }).one();
-
-    const contractDefinition = ContractDefinitionFactory().one();
-
-    render(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
+    [OrderState.FAILED_PAYMENT, 'Last direct debit has failed'],
+    [OrderState.NO_PAYMENT, 'First direct debit has failed'],
+    [OrderState.PENDING, 'Pending for the first direct debit'],
+    [OrderState.PENDING_PAYMENT, 'On going'],
+    [OrderState.SIGNING, "Pending for learner's signature"],
+    [OrderState.TO_SAVE_PAYMENT_METHOD, 'Payment method is missing'],
+    [OrderState.TO_SIGN, "Pending for learner's signature"],
+  ])('should display message from order state: %s', (state, expectedMessage) => {
+    const order = CredentialOrderFactory({ state }).one();
+    render(<OrderStateTeacherMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
-    expect(screen.getByText("Pending for learner's signature")).toBeInTheDocument();
+    expect(screen.getByText(expectedMessage)).toBeInTheDocument();
   });
 
   it('should display message for validated order that need organization signature', () => {
     const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
+      state: OrderState.PENDING_PAYMENT,
       contract: ContractFactory({
         student_signed_on: new Date().toISOString(),
       }).one(),
     }).one();
-    const contractDefinition = ContractDefinitionFactory().one();
-
-    render(<OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />, {
-      wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
-    });
-    expect(screen.getByText('To be signed')).toBeInTheDocument();
-  });
 
-  it("should display message for validated order that don't have a generated certificate", () => {
-    const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
-      certificate_id: undefined,
-    }).one();
     render(<OrderStateTeacherMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
-    expect(
-      screen.getByText(intl.formatMessage(messages.statusOnGoing), {
-        exact: false,
-      }),
-    );
+    expect(screen.getByText('To be signed')).toBeInTheDocument();
   });
 
   it('should display message for validated order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
-      state: OrderState.VALIDATED,
+      state: OrderState.COMPLETED,
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
     render(<OrderStateTeacherMessage order={order} />, {
       wrapper: ({ children }: PropsWithChildren) => <IntlWrapper>{children}</IntlWrapper>,
     });
     expect(
-      screen.getByText(intl.formatMessage(messages.statusCompleted), {
+      screen.getByText(intl.formatMessage(messages.statusPassed), {
         exact: false,
       }),
     );

package/js/widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage/index.tsx

@@ -1,33 +1,32 @@
 import { defineMessages } from 'react-intl';
-import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+import OrderStateMessage, { MessageKeys, OrderStateMessageBaseProps } from '../OrderStateMessage';
 
-export const messages = defineMessages({
+export const messages = defineMessages<MessageKeys>({
   statusDraft: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusDraft',
     description: 'Status shown on the dashboard order item when order is draft.',
     defaultMessage: 'Pending',
   },
-  statusSubmitted: {
-    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusSubmitted',
-    description: 'Status shown on the dashboard order item when order is submitted.',
+  statusAssigned: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusAssigned',
+    description: 'Status shown on the dashboard order item when order is assigned.',
     defaultMessage: 'Pending',
   },
   statusPending: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPending',
     description: 'Status shown on the dashboard order item when order is pending.',
-    defaultMessage: 'Pending',
+    defaultMessage: 'Pending for the first direct debit',
   },
-  statusOnGoing: {
-    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOnGoing',
+  statusPendingPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPendingPayment',
     description:
       'Status shown on the dashboard order item when order is validated with no certificate',
-    defaultMessage: 'Enrolled',
+    defaultMessage: 'On going',
   },
   statusCompleted: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCompleted',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate',
-    defaultMessage: 'Certified',
+    description: 'Status shown on the dashboard order item when order is completed',
+    defaultMessage: 'On going',
   },
   statusWaitingSignature: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingSignature',
@@ -35,6 +34,12 @@ export const messages = defineMessages({
       "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
     defaultMessage: "Pending for learner's signature",
   },
+  statusWaitingPaymentMethod: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingPaymentMethod',
+    description:
+      'Status shown on the dashboard order item when order is in to_save_payment_method state.',
+    defaultMessage: 'Payment method is missing',
+  },
   statusWaitingCounterSignature: {
     id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingCounterSignature',
     description:
@@ -46,10 +51,21 @@ export const messages = defineMessages({
     description: 'Status shown on the dashboard order item when order is canceled',
     defaultMessage: 'Canceled',
   },
-  statusOther: {
-    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOther',
-    description: 'Status shown on the dashboard order item when order status is unknown',
-    defaultMessage: '{state}',
+  statusNoPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusNoPayment',
+    description: 'Status shown on the dashboard order item when order is in no payment state',
+    defaultMessage: 'First direct debit has failed',
+  },
+  statusFailedPayment: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusFailedPayment',
+    description: 'Status shown on the dashboard order item when order is in failed payment state',
+    defaultMessage: 'Last direct debit has failed',
+  },
+  statusPassed: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPassed',
+    description:
+      'Status shown on the dashboard order item when order is completed with certificate',
+    defaultMessage: 'Certified',
   },
 });
 

package/js/widgets/Dashboard/components/DashboardOrderLoader/index.tsx

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { useOmniscientOrder } from 'hooks/useOrders';
 import { Spinner } from 'components/Spinner';
 import Banner, { BannerType } from 'components/Banner';
-import { useCourseProduct } from 'hooks/useCourseProducts';
 import { isCredentialOrder } from 'pages/DashboardCourses/useOrdersEnrollments';
 import { handle } from 'utils/errors/handle';
 import { OrderHelper } from 'utils/OrderHelper';
@@ -39,10 +38,6 @@ export const DashboardOrderLoader = () => {
     item: order,
     states: { fetching: fetchingOrder, error: errorOrder },
   } = useOmniscientOrder(params.orderId);
-  const {
-    item: courseProduct,
-    states: { fetching: fetchingCourseProduct, error: errorCourseProduct },
-  } = useCourseProduct({ course_id: order?.course?.code, product_id: order?.product_id });
   const intl = useIntl();
 
   const credentialOrder = order && isCredentialOrder(order) ? order : undefined;
@@ -52,12 +47,9 @@ export const DashboardOrderLoader = () => {
       return intl.formatMessage(messages.wrongLinkedProductError);
     }
   }, [credentialOrder]);
-  const error = errorOrder || errorCourseProduct || wrongLinkedProductError;
-  const fetching = fetchingOrder || fetchingCourseProduct;
-  const needsSignature = OrderHelper.orderNeedsSignature(
-    order,
-    courseProduct?.product.contract_definition,
-  );
+  const error = errorOrder || wrongLinkedProductError;
+  const fetching = fetchingOrder;
+  const needsSignature = order ? OrderHelper.orderNeedsSignature(order) : false;
 
   return (
     <>

package/js/widgets/Dashboard/components/Signature/SignatureDummy.tsx

@@ -4,6 +4,7 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { SignatureProps } from 'components/ContractFrame';
 import { DummyContractPlaceholder } from 'widgets/Dashboard/components/Signature/DummyContractPlaceholder';
 import { CONTRACT_SETTINGS } from 'settings';
+import { getAPIEndpoint } from 'api/joanie';
 
 const messages = defineMessages({
   button: {
@@ -23,12 +24,31 @@ enum SignatureDummySteps {
   SIGNING_LOADING,
 }
 
-export const SignatureDummy = ({ onDone }: SignatureProps) => {
+export const SignatureDummy = ({ invitationLink, onDone }: SignatureProps) => {
   const [step, setStep] = useState(SignatureDummySteps.SIGNING);
 
+  const baseUrl = getAPIEndpoint();
+  // eslint-disable-next-line compat/compat
+  const link = new URL(invitationLink);
+  const reference = link.searchParams.get('reference');
+  const event = link.searchParams.get('eventTarget');
+  const sendSignatureNotification = () => {
+    fetch(`${baseUrl}/signature/notifications/`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        event_type: event,
+        reference,
+      }),
+    });
+  };
+
   const sign = () => {
     setStep(SignatureDummySteps.SIGNING_LOADING);
     setTimeout(() => {
+      sendSignatureNotification();
       onDone();
     }, CONTRACT_SETTINGS.dummySignatureSignTimeout);
   };
@@ -44,11 +64,13 @@ export const SignatureDummy = ({ onDone }: SignatureProps) => {
         </div>
       )}
       {step === SignatureDummySteps.SIGNING_LOADING && (
-        <div className="ContractFrame__loading-container">
+        <div className="ContractFrame__container">
           <h3 className="ContractFrame__caption">
             <FormattedMessage {...messages.signing} />
           </h3>
-          <Loader />
+          <div className="ContractFrame__footer">
+            <Loader />
+          </div>
         </div>
       )}
     </>

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx

@@ -11,7 +11,6 @@ import useDateFormat from 'hooks/useDateFormat';
 import { IntlHelper } from 'utils/IntlHelper';
 import WebAnalyticsAPIHandler from 'api/web-analytics';
 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';
@@ -53,16 +52,13 @@ const messages = defineMessages({
 interface Props {
   courseRuns: Joanie.CourseRun[];
   order: Joanie.Order;
-  product: Product;
 }
 
-const EnrollableCourseRunList = ({ courseRuns, order, product }: Props) => {
+const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
   const intl = useIntl();
   const formatDate = useDateFormat();
   const formRef = useRef<HTMLFormElement>(null);
-  const needsSignature = order
-    ? OrderHelper.orderNeedsSignature(order, product.contract_definition)
-    : false;
+  const needsSignature = order ? OrderHelper.orderNeedsSignature(order) : false;
 
   const [selectedCourseRun, setSelectedCourseRun] = useState<Maybe<Joanie.CourseRun>>();
   const [submitted, setSubmitted] = useState(false);

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

@@ -11,7 +11,7 @@ import {
   CredentialOrderFactory,
   ProductFactory,
 } from 'utils/test/factories/joanie';
-import type { CourseLight, CourseRun, Enrollment } from 'types/Joanie';
+import { CourseLight, CourseRun, Enrollment, OrderState } from 'types/Joanie';
 import { Deferred } from 'utils/test/deferred';
 import { CourseStateTextEnum, Priority } from 'types';
 import { IntlHelper } from 'utils/IntlHelper';
@@ -114,10 +114,9 @@ describe('CourseProductCourseRuns', () => {
 
     it('renders a warning message when no course runs are provided', () => {
       const order = CredentialOrderFactory().one();
-      const product = ProductFactory().one();
 
       fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
-      render(<EnrollableCourseRunList courseRuns={[]} order={order} product={product} />, {
+      render(<EnrollableCourseRunList courseRuns={[]} order={order} />, {
         wrapper: BaseJoanieAppWrapper,
       });
 
@@ -127,12 +126,9 @@ describe('CourseProductCourseRuns', () => {
     it('renders a list of course runs with a call to action to enroll', async () => {
       const courseRuns: CourseRun[] = CourseRunFactory().many(2);
       const order = CredentialOrderFactory().one();
-      const product = ProductFactory({
-        contract_definition: undefined,
-      }).one();
 
       fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
-      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />, {
+      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} />, {
         wrapper: BaseJoanieAppWrapper,
       });
 
@@ -247,7 +243,7 @@ describe('CourseProductCourseRuns', () => {
       fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.code}/`, HttpStatusCode.OK);
       fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
 
-      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} product={product} />, {
+      render(<EnrollableCourseRunList courseRuns={courseRuns} order={order} />, {
         wrapper: BaseJoanieAppWrapper,
       });
 
@@ -355,12 +351,10 @@ describe('CourseProductCourseRuns', () => {
           text: CourseStateTextEnum.STARTING_ON,
         },
       }).one();
-      const product = ProductFactory().one();
-      product.contract_definition = undefined;
       const order = CredentialOrderFactory().one();
 
       fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
-      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />, {
+      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} />, {
         wrapper: BaseJoanieAppWrapper,
       });
 
@@ -438,11 +432,10 @@ describe('CourseProductCourseRuns', () => {
           text: CourseStateTextEnum.STARTING_ON,
         },
       }).one();
-      const product = ProductFactory().one();
-      const order = CredentialOrderFactory().one();
+      const order = CredentialOrderFactory({ state: OrderState.TO_SIGN }).one();
 
       fetchMock.get('https://joanie.endpoint/api/v1.0/enrollments/', []);
-      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} product={product} />, {
+      render(<EnrollableCourseRunList courseRuns={[courseRun]} order={order} />, {
         wrapper: BaseJoanieAppWrapper,
       });
 

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

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { screen, getByText } from '@testing-library/react';
-import { CredentialOrderFactory, ProductFactory } from 'utils/test/factories/joanie';
+import { CredentialOrderFactory } from 'utils/test/factories/joanie';
 import type { CourseRun, CredentialOrder } from 'types/Joanie';
 import { OrderState } from 'types/Joanie';
 import { render } from 'utils/test/render';
@@ -15,14 +15,16 @@ 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: CredentialOrder = CredentialOrderFactory({
-      state: faker.helpers.arrayElement([OrderState.CANCELED, OrderState.PENDING]),
+      state: faker.helpers.arrayElement([
+        OrderState.CANCELED,
+        OrderState.PENDING,
+        OrderState.NO_PAYMENT,
+      ]),
     }).one();
-    const product = ProductFactory().one();
-    product.contract_definition = undefined;
 
     const targetCourse = order.target_courses[0];
 
-    render(<CourseRunItem targetCourse={targetCourse} order={order} product={product} />, {
+    render(<CourseRunItem targetCourse={targetCourse} order={order} />, {
       wrapper: null,
     });
 

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

@@ -2,8 +2,8 @@ import { useEffect, useRef } from 'react';
 import { defineMessages } from 'react-intl';
 import { Priority } from 'types';
 import type * as Joanie from 'types/Joanie';
-import { OrderState, Product } from 'types/Joanie';
 import { CoursesHelper } from 'utils/CoursesHelper';
+import { OrderHelper } from 'utils/OrderHelper';
 import {
   CourseRunList,
   EnrollableCourseRunList,
@@ -26,13 +26,12 @@ other {Languages:}
 interface Props {
   targetCourse: Joanie.TargetCourse;
   order?: Joanie.CredentialOrder;
-  product: Product;
 }
 
-const CourseRunItem = ({ targetCourse, order, product }: Props) => {
-  const isEnrollable = order?.state === OrderState.VALIDATED;
+const CourseRunItem = ({ targetCourse, order }: Props) => {
+  const isEnrollable = OrderHelper.allowEnrollment(order);
   const courseRunEnrollment = isEnrollable
-    ? CoursesHelper.findActiveCourseEnrollmentInOrder(targetCourse, order)
+    ? CoursesHelper.findActiveCourseEnrollmentInOrder(targetCourse, order!)
     : undefined;
   const isEnrolled = !!courseRunEnrollment?.is_active;
 
@@ -92,8 +91,7 @@ const CourseRunItem = ({ targetCourse, order, product }: Props) => {
       {isEnrollable && !isEnrolled && (
         <EnrollableCourseRunList
           courseRuns={targetCourse.course_runs.filter(isOpenedCourseRun)}
-          order={order}
-          product={product}
+          order={order!}
         />
       )}
       {isEnrollable && isEnrolled && <EnrolledCourseRun enrollment={courseRunEnrollment} />}