richie-education 2.25.0-b2.dev127 → 2.25.0-b2.dev128

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.spec.tsx

@@ -55,7 +55,7 @@ describe('pages/CourseLearnerDataGrid', () => {
       expect(cells[2]).toHaveTextContent(
         intl.formatDate(new Date(courseOrder.created_on), DEFAULT_DATE_FORMAT),
       );
-      expect(cells[3]).toHaveTextContent('Completed');
+      expect(cells[3]).toHaveTextContent('Certified');
       expect(within(cells[4]).getByText('Contact')).toBeInTheDocument();
     });
   });

package/js/pages/TeacherDashboardCourseLearnersLayout/components/CourseLearnerDataGrid/index.tsx

@@ -3,7 +3,7 @@ import { Button, DataGrid, DataGridProps, PaginationProps, Row } from '@openfun/
 import { useMemo } from 'react';
 import { NestedCourseOrder } from 'types/Joanie';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
-import OrderStateMessage from 'widgets/Dashboard/components/DashboardItem/Order/OrderStateMessage';
+import OrderStateTeacherMessage from 'widgets/Dashboard/components/DashboardItem/Order/OrderStateTeacherMessage';
 import DashboardListAvatar from 'widgets/Dashboard/components/DashboardListAvatar';
 
 const messages = defineMessages({
@@ -74,10 +74,8 @@ const CourseLearnerDataGrid = ({
       headerName: intl.formatMessage(messages.columnState),
       enableSorting: false,
       renderCell: (params: { row: Row }) => {
-        // TODO(rlecellier): create NestedOrderCourseStateMessage that's get label dedicated to teatchers.
-        // like signature needed for studdent is awaiting signature for a teacher.
         return (
-          <OrderStateMessage
+          <OrderStateTeacherMessage
             order={params.row.courseOrder}
             contractDefinition={params.row.courseOrder.product.contract_definition_id}
           />

package/js/utils/OrderHelper/index.ts

@@ -7,10 +7,52 @@ import {
   NestedCourseOrder,
 } from 'types/Joanie';
 
+export enum OrderStatus {
+  DRAFT = 'draft',
+  SUBMITTED = 'submitted',
+  PENDING = 'pending',
+  CANCELED = 'canceled',
+  WAITING_SIGNATURE = 'waiting_signature',
+  WAITING_COUNTER_SIGNATURE = 'waiting_counter_signature',
+  COMPLETED = 'completed',
+  ON_GOING = 'on_going',
+}
+
 /**
  * Helper class for orders
  */
 export class OrderHelper {
+  static getState(order: Order | NestedCourseOrder, contractDefinition?: ContractDefinition) {
+    const { certificate_id: certificateId } = order;
+
+    if (order.state === OrderState.VALIDATED) {
+      if (OrderHelper.orderNeedsSignature(order, contractDefinition)) {
+        return OrderStatus.WAITING_SIGNATURE;
+      }
+      if (OrderHelper.orderNeedsCounterSignature(order)) {
+        return OrderStatus.WAITING_COUNTER_SIGNATURE;
+      }
+      if (certificateId) {
+        return OrderStatus.COMPLETED;
+      } else {
+        return OrderStatus.ON_GOING;
+      }
+    }
+
+    const orderStatusMap = {
+      [OrderState.DRAFT]: OrderStatus.DRAFT,
+      [OrderState.SUBMITTED]: OrderStatus.SUBMITTED,
+      [OrderState.PENDING]: OrderStatus.PENDING,
+      [OrderState.CANCELED]: OrderStatus.CANCELED,
+    };
+
+    if (order.state in orderStatusMap) {
+      return orderStatusMap[order.state];
+    }
+
+    return null;
+  }
+
   /**
    * return an Order from the given list that match given productId
    */
@@ -33,4 +75,16 @@ export class OrderHelper {
       !(order.contract && order.contract.student_signed_on)
     );
   }
+
+  /**
+   * tell us if a order need to be sign by the organization.
+   */
+  static orderNeedsCounterSignature(order: Order | NestedCourseOrder) {
+    return (
+      order?.state === OrderState.VALIDATED &&
+      order.contract &&
+      order.contract.student_signed_on &&
+      !order.contract.organization_signed_on
+    );
+  }
 }

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

@@ -146,7 +146,7 @@ export const ContractFactory = factory((): Contract => {
 export const ContractLightFactory = factory((): ContractLight => {
   return {
     id: faker.string.uuid(),
-    student_signed_on: faker.date.past().toISOString(),
+    student_signed_on: null,
     organization_signed_on: null,
   };
 });

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrder.tsx

@@ -20,7 +20,7 @@ import { DashboardSubItemsList } from '../DashboardSubItemsList';
 import { DashboardItemCourseEnrolling } from '../CourseEnrolling';
 import { DashboardItem } from '../index';
 import { DashboardItemContract } from '../Contract';
-import OrderStateMessage from './OrderStateMessage';
+import OrderStateLearnerMessage from './OrderStateLearnerMessage';
 
 const messages = defineMessages({
   accessCourse: {
@@ -159,7 +159,7 @@ export const DashboardItemOrder = ({
             <div className="dashboard-item-order__footer">
               <div className="dashboard-item__block__status">
                 <Icon name={IconTypeEnum.SCHOOL} />
-                <OrderStateMessage
+                <OrderStateLearnerMessage
                   order={order}
                   contractDefinition={product?.contract_definition}
                 />

package/js/widgets/Dashboard/components/DashboardItem/Order/{OrderStateMessage → OrderStateLearnerMessage}/index.spec.tsx

@@ -7,22 +7,10 @@ import {
   CredentialOrderFactory,
 } from 'utils/test/factories/joanie';
 import { OrderState } from 'types/Joanie';
-import OrderStateMessage, { messages } from '.';
+import OrderStateLearnerMessage, { messages } from '.';
 
 const intl = createIntl({ locale: 'en' });
 
-/*
-  @TODO (rlecellier): Rewrite everything with these guidlignes
-  Order lifecycle:
-    * Draft: order has been created
-    * Submitted: order information have been validated
-    * Pending: payment has failed but can be retried
-    * Validated:
-        * Completed (Validated with generated certificate)
-        * On going (Validated without generated certificate)
-        * Signature needed: !order.product.contract.isSign
-    * Canceled: has been canceled
-*/
 describe('<DashboardItemOrder/>', () => {
   const Wrapper = ({ children }: PropsWithChildren) => (
     <IntlProvider locale="en">{children}</IntlProvider>
@@ -39,7 +27,7 @@ describe('<DashboardItemOrder/>', () => {
       const order = CredentialOrderFactory({ state }).one();
       render(
         <Wrapper>
-          <OrderStateMessage order={order} />
+          <OrderStateLearnerMessage order={order} />
         </Wrapper>,
       );
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
@@ -60,7 +48,7 @@ describe('<DashboardItemOrder/>', () => {
       }).one();
       render(
         <Wrapper>
-          <OrderStateMessage order={orderWithContract} />
+          <OrderStateLearnerMessage order={orderWithContract} />
         </Wrapper>,
       );
       expect(screen.getByText(expectedMessage)).toBeInTheDocument();
@@ -77,7 +65,7 @@ describe('<DashboardItemOrder/>', () => {
 
     render(
       <Wrapper>
-        <OrderStateMessage order={order} contractDefinition={contractDefinition} />
+        <OrderStateLearnerMessage order={order} contractDefinition={contractDefinition} />
       </Wrapper>,
     );
     expect(screen.getByText('Signature required')).toBeInTheDocument();
@@ -91,7 +79,7 @@ describe('<DashboardItemOrder/>', () => {
     }).one();
     render(
       <Wrapper>
-        <OrderStateMessage order={order} />
+        <OrderStateLearnerMessage order={order} />
       </Wrapper>,
     );
     expect(
@@ -104,12 +92,15 @@ describe('<DashboardItemOrder/>', () => {
   it('should display message for validated order that have a generated certificate', () => {
     const order = CredentialOrderFactory({
       state: OrderState.VALIDATED,
-      contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
+      contract: ContractFactory({
+        student_signed_on: new Date().toISOString(),
+        organization_signed_on: new Date().toISOString(),
+      }).one(),
       certificate_id: 'FAKE_CERTIFICATE_ID',
     }).one();
     render(
       <Wrapper>
-        <OrderStateMessage order={order} />
+        <OrderStateLearnerMessage order={order} />
       </Wrapper>,
     );
     expect(

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

@@ -0,0 +1,60 @@
+import { defineMessages } from 'react-intl';
+import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+
+export const messages = defineMessages({
+  statusDraft: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusDraft',
+    description: 'Status shown on the dashboard order item when order is draft.',
+    defaultMessage: 'Draft',
+  },
+  statusSubmitted: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusSubmitted',
+    description: 'Status shown on the dashboard order item when order is submitted.',
+    defaultMessage: 'Submitted',
+  },
+  statusPending: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusPending',
+    description: 'Status shown on the dashboard order item when order is pending.',
+    defaultMessage: 'Pending',
+  },
+  statusOnGoing: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusOnGoing',
+    description:
+      'Status shown on the dashboard order item when order is validated with no certificate',
+    defaultMessage: 'On going',
+  },
+  statusCompleted: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusCompleted',
+    description:
+      'Status shown on the dashboard order item when order is validated with certificate',
+    defaultMessage: 'Completed',
+  },
+  statusWaitingSignature: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
+    defaultMessage: 'Signature required',
+  },
+  statusWaitingCounterSignature: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingCounterSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
+    defaultMessage: 'On going',
+  },
+  statusCanceled: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusCanceled',
+    description: 'Status shown on the dashboard order item when order is canceled',
+    defaultMessage: 'Canceled',
+  },
+  statusOther: {
+    id: 'components.DashboardItem.Order.OrderStateMessage.statusOther',
+    description: 'Status shown on the dashboard order item when order status is unknown',
+    defaultMessage: '{state}',
+  },
+});
+
+const OrderStateLearnerMessage = (props: OrderStateMessageBaseProps) => {
+  return <OrderStateMessage {...props} messages={messages} />;
+};
+
+export default OrderStateLearnerMessage;

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

@@ -1,4 +1,4 @@
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { FormattedMessage, MessageDescriptor } from 'react-intl';
 import { useEffect } from 'react';
 import {
   CertificateOrder,
@@ -9,96 +9,46 @@ import {
 } from 'types/Joanie';
 import { StringHelper } from 'utils/StringHelper';
 import { handle } from 'utils/errors/handle';
-import { OrderHelper } from 'utils/OrderHelper';
+import { OrderHelper, OrderStatus } from 'utils/OrderHelper';
 
-export const messages = defineMessages({
-  statusDraft: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusDraft',
-    description: 'Status shown on the dashboard order item when order is draft.',
-    defaultMessage: 'Draft',
-  },
-  statusSubmitted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusSubmitted',
-    description: 'Status shown on the dashboard order item when order is submitted.',
-    defaultMessage: 'Submitted',
-  },
-  statusPending: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusPending',
-    description: 'Status shown on the dashboard order item when order is pending.',
-    defaultMessage: 'Pending',
-  },
-  statusOnGoing: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOnGoing',
-    description:
-      'Status shown on the dashboard order item when order is validated with no certificate',
-    defaultMessage: 'On going',
-  },
-  statusCompleted: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCompleted',
-    description:
-      'Status shown on the dashboard order item when order is validated with certificate',
-    defaultMessage: 'Completed',
-  },
-  statusWaitingSignature: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusWaitingSignature',
-    description:
-      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
-    defaultMessage: 'Signature required',
-  },
-  statusCanceled: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusCanceled',
-    description: 'Status shown on the dashboard order item when order is canceled',
-    defaultMessage: 'Canceled',
-  },
-  statusOther: {
-    id: 'components.DashboardItem.Order.OrderStateMessage.statusOther',
-    description: 'Status shown on the dashboard order item when order status is unknown',
-    defaultMessage: '{state}',
-  },
-});
-
-interface OrderStateMessageProps {
+export interface OrderStateMessageBaseProps {
   order: CredentialOrder | CertificateOrder | NestedCourseOrder;
   contractDefinition?: ContractDefinition;
 }
 
-const OrderStateMessage = ({ order, contractDefinition }: OrderStateMessageProps) => {
-  const { certificate_id: certificateId } = order;
-  const orderStatusMessages = {
-    [OrderState.DRAFT]: messages.statusDraft,
-    [OrderState.SUBMITTED]: messages.statusSubmitted,
-    [OrderState.PENDING]: messages.statusPending,
-    [OrderState.CANCELED]: messages.statusCanceled,
-  };
+interface OrderStateMessageProps extends OrderStateMessageBaseProps {
+  messages: Record<string, MessageDescriptor>;
+}
 
+const OrderStateMessage = ({ order, contractDefinition, messages }: OrderStateMessageProps) => {
   useEffect(() => {
     if (!Object.values(OrderState).includes(order.state)) {
       handle(new Error(`Unknown order state ${order.state}`));
     }
   }, [order.state]);
 
-  if (order.state === OrderState.VALIDATED) {
-    if (OrderHelper.orderNeedsSignature(order, contractDefinition)) {
-      return <FormattedMessage {...messages.statusWaitingSignature} />;
-    }
-
-    if (certificateId) {
-      return <FormattedMessage {...messages.statusCompleted} />;
-    } else {
-      return <FormattedMessage {...messages.statusOnGoing} />;
-    }
-  }
-
-  if (order.state in orderStatusMessages) {
-    return <FormattedMessage {...orderStatusMessages[order.state]} />;
+  const orderStatusMessagesMap = {
+    [OrderStatus.DRAFT]: messages.statusDraft,
+    [OrderStatus.SUBMITTED]: messages.statusSubmitted,
+    [OrderStatus.PENDING]: messages.statusPending,
+    [OrderStatus.CANCELED]: messages.statusCanceled,
+    [OrderStatus.WAITING_SIGNATURE]: messages.statusWaitingSignature,
+    [OrderStatus.WAITING_COUNTER_SIGNATURE]: messages.statusWaitingCounterSignature,
+    [OrderStatus.COMPLETED]: messages.statusCompleted,
+    [OrderStatus.ON_GOING]: messages.statusOnGoing,
+  };
+  const status = OrderHelper.getState(order, contractDefinition);
+
+  if (status === null) {
+    return (
+      <FormattedMessage
+        {...messages.statusOther}
+        values={{ state: StringHelper.capitalizeFirst(order.state) }}
+      />
+    );
   }
 
-  return (
-    <FormattedMessage
-      {...messages.statusOther}
-      values={{ state: StringHelper.capitalizeFirst(order.state) }}
-    />
-  );
+  return <FormattedMessage {...orderStatusMessagesMap[status]} />;
 };
 
 export default OrderStateMessage;

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

@@ -0,0 +1,127 @@
+import React, { PropsWithChildren } from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import {
+  ContractDefinitionFactory,
+  ContractFactory,
+  CredentialOrderFactory,
+} from 'utils/test/factories/joanie';
+import { OrderState } from 'types/Joanie';
+import OrderStateTeacherMessage, { messages } from '.';
+
+const intl = createIntl({ locale: 'en' });
+
+describe('<OrderStateTeacherMessage/>', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <IntlProvider locale="en">{children}</IntlProvider>
+  );
+
+  it.each([
+    [OrderState.DRAFT, 'Pending'],
+    [OrderState.SUBMITTED, 'Pending'],
+    [OrderState.PENDING, 'Pending'],
+    [OrderState.CANCELED, 'Canceled'],
+  ])(
+    'should display message from order state: %s when order have no contract',
+    (state, expectedMessage) => {
+      const order = CredentialOrderFactory({ state }).one();
+      render(
+        <Wrapper>
+          <OrderStateTeacherMessage order={order} />
+        </Wrapper>,
+      );
+      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    [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(
+        <Wrapper>
+          <OrderStateTeacherMessage
+            order={orderWithContract}
+            contractDefinition={ContractDefinitionFactory().one()}
+          />
+        </Wrapper>,
+      );
+      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(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
+      </Wrapper>,
+    );
+    expect(screen.getByText("Pending for learner's signature")).toBeInTheDocument();
+  });
+
+  it('should display message for validated order that need organization signature', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      contract: ContractFactory({
+        student_signed_on: new Date().toISOString(),
+      }).one(),
+    }).one();
+    const contractDefinition = ContractDefinitionFactory().one();
+
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} contractDefinition={contractDefinition} />
+      </Wrapper>,
+    );
+    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(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByText(intl.formatMessage(messages.statusOnGoing), {
+        exact: false,
+      }),
+    );
+  });
+
+  it('should display message for validated order that have a generated certificate', () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      certificate_id: 'FAKE_CERTIFICATE_ID',
+    }).one();
+    render(
+      <Wrapper>
+        <OrderStateTeacherMessage order={order} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByText(intl.formatMessage(messages.statusCompleted), {
+        exact: false,
+      }),
+    );
+  });
+});

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

@@ -0,0 +1,60 @@
+import { defineMessages } from 'react-intl';
+import OrderStateMessage, { OrderStateMessageBaseProps } from '../OrderStateMessage';
+
+export const messages = defineMessages({
+  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.',
+    defaultMessage: 'Pending',
+  },
+  statusPending: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusPending',
+    description: 'Status shown on the dashboard order item when order is pending.',
+    defaultMessage: 'Pending',
+  },
+  statusOnGoing: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusOnGoing',
+    description:
+      'Status shown on the dashboard order item when order is validated with no certificate',
+    defaultMessage: 'Enrolled',
+  },
+  statusCompleted: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCompleted',
+    description:
+      'Status shown on the dashboard order item when order is validated with certificate',
+    defaultMessage: 'Certified',
+  },
+  statusWaitingSignature: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's learner signature missing.",
+    defaultMessage: "Pending for learner's signature",
+  },
+  statusWaitingCounterSignature: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusWaitingCounterSignature',
+    description:
+      "Status shown on the dashboard order item when order is validated with contract's organization signature missing.",
+    defaultMessage: 'To be signed',
+  },
+  statusCanceled: {
+    id: 'components.DashboardItem.Order.OrderStateTeacherMessage.statusCanceled',
+    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}',
+  },
+});
+
+const OrderStateTeacherMessage = (props: OrderStateMessageBaseProps) => {
+  return <OrderStateMessage {...props} messages={messages} />;
+};
+
+export default OrderStateTeacherMessage;

package/package.json

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