richie-education 2.29.1-dev32 → 2.29.1-dev37

package/js/utils/ProductHelper/index.ts

@@ -2,6 +2,8 @@ import { IntlShape } from 'react-intl';
 import { CourseProductRelation, Product, TargetCourse } from 'types/Joanie';
 import { Maybe } from 'types/utils';
 import { IntlHelper } from 'utils/IntlHelper';
+import * as Joanie from 'types/Joanie';
+import { isOpenedCourseRunCertificate, isOpenedCourseRunCredential } from 'utils/CourseRuns';
 
 /**
  * Helper class for products
@@ -45,4 +47,34 @@ export class ProductHelper {
   static getActiveOrderGroups(courseProductRelation: CourseProductRelation) {
     return courseProductRelation.order_groups?.filter((orderGroup) => orderGroup.is_active);
   }
+
+  static hasRemainingSeats(product: Maybe<Product>) {
+    if (!product) return false;
+    return typeof product?.remaining_order_count !== 'number' || product.remaining_order_count > 0;
+  }
+
+  static hasOpenedTargetCourse(product: Maybe<Product>, enrollment?: Maybe<Joanie.Enrollment>) {
+    if (!product) return false;
+
+    if (product.type === Joanie.ProductType.CERTIFICATE) {
+      if (!enrollment?.course_run) {
+        throw new Error(
+          'Unable to check if the certificate product relies on an opened course run without enrollment.',
+        );
+      }
+
+      return isOpenedCourseRunCertificate(enrollment.course_run.state);
+    }
+
+    return (
+      product.target_courses.length > 0 &&
+      product.target_courses.every(({ course_runs }) =>
+        course_runs.some((targetCourseRun) => isOpenedCourseRunCredential(targetCourseRun.state)),
+      )
+    );
+  }
+
+  static isPurchasable(product: Maybe<Product>, enrollment?: Maybe<Joanie.Enrollment>) {
+    return this.hasOpenedTargetCourse(product, enrollment) && this.hasRemainingSeats(product);
+  }
 }

package/js/widgets/Dashboard/components/DashboardItem/Contract/index.spec.tsx

@@ -122,7 +122,7 @@ describe.each([
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
     expect(screen.getByText(contract.order.product_title)).toBeInTheDocument();
     expect(
-      screen.getByText('You have to sign this training contract to access your training.'),
+      screen.getByText('You have to sign this training contract to finalize your subscription.'),
     ).toBeInTheDocument();
 
     expect(screen.queryByRole('button', { name: 'Sign' })).toBeInTheDocument();
@@ -149,7 +149,7 @@ describe.each([
     expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
     expect(screen.getByText(contract.order.product_title)).toBeInTheDocument();
     expect(
-      screen.getByText('You have to sign this training contract to access your training.'),
+      screen.getByText('You have to sign this training contract to finalize your subscription.'),
     ).toBeInTheDocument();
 
     expect(screen.queryByRole('link', { name: 'Sign' })).toBeInTheDocument();

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

@@ -0,0 +1,51 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+import { CredentialOrder, Product } from 'types/Joanie';
+import { DashboardItemCertificate } from 'widgets/Dashboard/components/DashboardItem/Certificate';
+import { useCertificate } from 'hooks/useCertificates';
+import { Spinner } from 'components/Spinner';
+
+const messages = defineMessages({
+  loadingCertificate: {
+    id: 'components.DashboardItemOrder.CertificateItem.loadingCertificate',
+    description: 'Accessible label displayed while certificate is being fetched on the dashboard.',
+    defaultMessage: 'Loading certificate...',
+  },
+});
+
+interface DashboardItemOrderCertificateProps {
+  order: CredentialOrder;
+  product: Product;
+}
+
+const CertificateItem = ({ order, product }: DashboardItemOrderCertificateProps) => {
+  if (!order.certificate_id) {
+    return (
+      <DashboardItemCertificate
+        certificateDefinition={product.certificate_definition}
+        productType={product.type}
+        mode="compact"
+      />
+    );
+  }
+  const certificate = useCertificate(order.certificate_id);
+  return (
+    <>
+      {certificate.states.fetching && (
+        <Spinner aria-labelledby="loading-certificate">
+          <span id="loading-certificate">
+            <FormattedMessage {...messages.loadingCertificate} />
+          </span>
+        </Spinner>
+      )}
+      {certificate.item && (
+        <DashboardItemCertificate
+          certificate={certificate.item}
+          productType={product.type}
+          mode="compact"
+        />
+      )}
+    </>
+  );
+};
+
+export default CertificateItem;

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

@@ -0,0 +1,52 @@
+import { defineMessages, FormattedMessage } from 'react-intl';
+import classNames from 'classnames';
+import { CredentialOrder, Product } from 'types/Joanie';
+import { OrderHelper } from 'utils/OrderHelper';
+import ContractStatus from 'components/ContractStatus';
+import SignContractButton from 'components/SignContractButton';
+
+const messages = defineMessages({
+  trainingContractTitle: {
+    id: 'components.DashboardItemOrder.ContractItem.trainingContractTitle',
+    description: 'Title of the training contract section',
+    defaultMessage: 'Training contract',
+  },
+});
+
+const ContractItem = ({ order, product }: { order: CredentialOrder; product: Product }) => {
+  if (!product?.contract_definition) {
+    return;
+  }
+
+  const needsSignature = OrderHelper.orderNeedsSignature(order);
+  return (
+    <div
+      id="dashboard-item-contract"
+      className="dashboard-splitted-card__item"
+      data-testid={`dashboard-item-contract-${order.id}`}
+    >
+      <div
+        className={classNames('dashboard-splitted-card__item__title', {
+          'dashboard-splitted-card__item__title--dot': needsSignature,
+        })}
+      >
+        <span>
+          <FormattedMessage {...messages.trainingContractTitle} />
+        </span>
+      </div>
+      <div className="dashboard-splitted-card__item__description">
+        <ContractStatus contract={order.contract} />
+      </div>
+      <div className="dashboard-splitted-card__item__actions">
+        <SignContractButton
+          order={order}
+          contract={order.contract}
+          writable={true}
+          className="dashboard-item__button"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ContractItem;

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemNotResumable.spec.tsx

@@ -0,0 +1,109 @@
+/**
+ * Test suite for DashboardItem component with a non-resumable order (inactive and related product
+ * is no more purchasable (no remaining seats if order group, some target courses are not opened)).
+ */
+
+import fetchMock from 'fetch-mock';
+import { render, screen, within } from '@testing-library/react';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { CredentialOrderFactory } from 'utils/test/factories/joanie';
+import { OrderState } from 'types/Joanie';
+import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRoutesPaths';
+import { BaseJoanieAppWrapper } from 'utils/test/wrappers/BaseJoanieAppWrapper';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('DashboardItemOrder / Not resumable', () => {
+  setupJoanieSession();
+  beforeEach(() => {
+    fetchMock.get(
+      'begin:https://joanie.endpoint/api/v1.0/enrollments/',
+      { results: [], next: null, previous: null, count: null },
+      { overwriteRoutes: true },
+    );
+  });
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  describe('non-writable', () => {
+    it('renders elements to explain that the order process is not resumable', async () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.TO_SIGN,
+      }).one();
+
+      fetchMock.get('begin:https://joanie.endpoint/api/v1.0/orders/', {
+        results: [order],
+        next: null,
+        previous: null,
+        count: null,
+      });
+
+      const { product } = mockCourseProductWithOrder(order);
+      // Make product no more purchasable
+      product.remaining_order_count = 0;
+
+      render(<DashboardTest initialRoute={LearnerDashboardPaths.COURSES} />, {
+        wrapper: BaseJoanieAppWrapper,
+      });
+
+      const dashboardItem = await screen.findByTestId(`dashboard-item-order-${order.id}`);
+      within(dashboardItem).getByRole('heading', { level: 5, name: product.title });
+      within(dashboardItem).getByText(
+        'The subscription process cannot be resumed. The related training is no more purchasable.',
+      );
+
+      // No subitem should be displayed (target course details)
+      expect(within(dashboardItem).queryAllByTestId('dashboard-sub-item')).toHaveLength(0);
+    });
+  });
+
+  describe('writable', () => {
+    it('renders elements to explain that the order process is not resumable', async () => {
+      const order = CredentialOrderFactory({
+        state: OrderState.TO_SAVE_PAYMENT_METHOD,
+      }).one();
+
+      fetchMock.get(
+        'https://joanie.endpoint/api/v1.0/orders/',
+        { results: [order], next: null, previous: null, count: null },
+        { overwriteRoutes: true },
+      );
+
+      const url = `begin:https://joanie.endpoint/api/v1.0/orders/?`;
+      fetchMock.get(url, [order]);
+
+      const { product } = mockCourseProductWithOrder(order);
+      // Make product no more purchasable
+      product.remaining_order_count = 0;
+
+      render(
+        <DashboardTest initialRoute={LearnerDashboardPaths.ORDER.replace(':orderId', order.id)} />,
+        {
+          wrapper: BaseJoanieAppWrapper,
+        },
+      );
+
+      const dashboardItem = await screen.findByTestId(`dashboard-item-order-${order.id}`);
+      within(dashboardItem).getByRole('heading', { level: 5, name: product.title });
+      within(dashboardItem).getByText(
+        'The subscription process cannot be resumed. The related training is no more purchasable.',
+      );
+
+      // No subitem should be displayed (target course details)
+      expect(within(dashboardItem).queryAllByTestId('dashboard-sub-item')).toHaveLength(0);
+
+      // Organization block should not be displayed
+      expect(within(dashboardItem).queryByTestId('organization-block')).toBeNull();
+    });
+  });
+});

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

@@ -12,6 +12,7 @@ import {
 import { faker } from '@faker-js/faker';
 import fetchMock from 'fetch-mock';
 import userEvent from '@testing-library/user-event';
+import queryString from 'query-string';
 import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
 import {
   CourseStateFactory,
@@ -31,6 +32,7 @@ import {
   CourseLight,
   CourseRun,
   CredentialOrder,
+  NOT_CANCELED_ORDER_STATES,
   OrderState,
   PaymentScheduleState,
 } from 'types/Joanie';
@@ -257,6 +259,15 @@ describe('<DashboardItemOrder/>', () => {
     order.target_courses = [];
     const { product } = mockCourseProductWithOrder(order);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -284,6 +295,15 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -349,6 +369,14 @@ describe('<DashboardItemOrder/>', () => {
       { results: [order], next: null, previous: null, count: null },
       { overwriteRoutes: true },
     );
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
 
     // The order with an enrollment that will be returned from the API when the orders will be
     // invalided after the click on the Enroll button.
@@ -432,6 +460,15 @@ describe('<DashboardItemOrder/>', () => {
       { overwriteRoutes: true },
     );
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     fetchMock.post('https://joanie.endpoint/api/v1.0/enrollments/', {
       status: HttpStatusCode.INTERNAL_SERVER_ERROR,
       body: 'Internal Server Error',
@@ -502,6 +539,14 @@ describe('<DashboardItemOrder/>', () => {
       { results: [order], next: null, previous: null, count: null },
       { overwriteRoutes: true },
     );
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
 
     // The order with new enrollment that will be returned from the API when the orders will be
     // invalided after the click on the Enroll button.
@@ -608,6 +653,14 @@ describe('<DashboardItemOrder/>', () => {
       { results: [order], next: null, previous: null, count: null },
       { overwriteRoutes: true },
     );
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
 
     const courseRun = order.target_courses[0].course_runs[0];
     const newEnrolledCourseRun = order.target_courses[0].course_runs[1];
@@ -693,6 +746,14 @@ describe('<DashboardItemOrder/>', () => {
       { results: [order], next: null, previous: null, count: null },
       { overwriteRoutes: true },
     );
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
 
     // The order with new enrollment that will be returned from the API when the orders will be
     // invalided after the click on the Enroll button.
@@ -772,6 +833,14 @@ describe('<DashboardItemOrder/>', () => {
       }).many(1),
     }).one();
     const { product } = mockCourseProductWithOrder(order);
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
 
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
@@ -808,6 +877,15 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -836,6 +914,15 @@ describe('<DashboardItemOrder/>', () => {
 
     const { product } = mockCourseProductWithOrder(order);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -852,6 +939,15 @@ describe('<DashboardItemOrder/>', () => {
     const order: CredentialOrder = CredentialOrderFactory().one();
     const { product } = mockCourseProductWithOrder(order);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     render(<DashboardItemOrder order={order} writable={true} showDetailsButton={false} />);
 
     await screen.findByRole('heading', { level: 5, name: product.title });
@@ -886,6 +982,15 @@ describe('<DashboardItemOrder/>', () => {
       )
       .get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, validOrder);
 
+    const orderQueryParameters = {
+      course_code: order.course.code,
+      product_id: order.product_id,
+      state: NOT_CANCELED_ORDER_STATES,
+    };
+    const queryParams = queryString.stringify(orderQueryParameters);
+    const url = `https://joanie.endpoint/api/v1.0/orders/?${queryParams}`;
+    fetchMock.get(url, [order]);
+
     order.state = OrderState.FAILED_PAYMENT;
     order.payment_schedule![1].state = PaymentScheduleState.REFUSED;