richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderContract.useUnionResource.cache.spec.tsx

@@ -0,0 +1,286 @@
+// FIXME: this test is about useUnionResource behavior.
+// we need to rewrite it in useUnionResource tests suite as small and generic as possible.
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { act, render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardTest } from 'widgets/Dashboard/components/DashboardTest';
+import {
+  ContractFactory,
+  CredentialOrderFactory,
+  TargetCourseFactory,
+} from 'utils/test/factories/joanie';
+import { mockCourseProductWithOrder } from 'utils/test/mockCourseProductWithOrder';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import { Deferred } from 'utils/test/deferred';
+import { expectNoSpinner, expectSpinner } from 'utils/test/expectSpinner';
+import { CONTRACT_SETTINGS } from 'settings';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('hooks/useIntersectionObserver', () => ({
+  useIntersectionObserver: (props: any) => {
+    (globalThis as any).__intersection_observer_props__ = props;
+  },
+}));
+
+describe('<DashboardItemOrder/> Contract', () => {
+  const Wrapper = (route: string) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <DashboardTest initialRoute={route} />
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.clearAllTimers();
+
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  describe('writable', () => {
+    it('successfully sign a contract', async () => {
+      const order = CredentialOrderFactory({
+        target_courses: TargetCourseFactory().many(1),
+        target_enrollments: [],
+        contract: ContractFactory({ student_signed_on: undefined }).one(),
+      }).one();
+
+      // learner dashboard course page do one call to course product relation per order
+      const { product } = mockCourseProductWithOrder(order);
+
+      // overwrite useOmniscientOrders call
+      fetchMock.get(
+        'https://joanie.endpoint/api/v1.0/orders/',
+        { results: [order], next: null, previous: null, count: null },
+        { overwriteRoutes: true },
+      );
+
+      // mock useUnionResources calls
+      fetchMock.get('begin:https://joanie.endpoint/api/v1.0/enrollments/', {
+        results: [],
+        next: null,
+        previous: null,
+        count: null,
+      });
+
+      fetchMock.get(
+        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        { results: [order], next: null, previous: null, count: null },
+      );
+
+      const submitDeferred = new Deferred();
+      fetchMock.post(
+        `https://joanie.endpoint/api/v1.0/orders/${order.id}/submit_for_signature/`,
+        submitDeferred.promise,
+      );
+
+      // delay: null is needed because as we are using fake timers it would mock the timers of
+      // RTL too. See https://github.com/testing-library/user-event/issues/833.
+      const user = userEvent.setup({ delay: null });
+
+      render(Wrapper(LearnerDashboardPaths.COURSES));
+
+      // console.log('apiCalls:2', fetchMock.calls().length);
+      await expectNoSpinner('Loading orders and enrollments...');
+
+      expect(
+        await screen.findByRole('heading', { level: 5, name: product.title }),
+      ).toBeInTheDocument();
+
+      // Make sure the sign button is shown.
+      await user.click(screen.getByRole('link', { name: 'Sign' }));
+
+      // Contract is shown and not in loading state.
+      const contractElement = await screen.findByTestId(`dashboard-item-contract-${order.id}`);
+      expect(within(contractElement).queryByRole('status')).not.toBeInTheDocument();
+      const signButton = screen.getByRole('button', { name: 'Sign' });
+      expect(signButton).not.toHaveAttribute('disabled');
+
+      // The modal is not shown.
+      expect(screen.queryByTestId('dashboard-contract-frame')).not.toBeInTheDocument();
+
+      await user.click(signButton);
+
+      // Modal is opened.
+      const modal = screen.getByTestId('dashboard-contract-frame');
+
+      // Waiting for submit route.
+      within(modal).queryByRole('header', { name: 'Loading your contract ...' });
+      within(modal).queryByRole('status');
+
+      // Resolve submit request.
+      await act(async () => {
+        submitDeferred.resolve({
+          invitation_link:
+            'https://dummysignaturebackend.fr/?requestToken=wfl_fake_dummy_dbe038b3-b6fe-40f4-b5bb-101fc80047a6#requestId=req',
+        });
+      });
+
+      // The contract is displayed.
+      within(modal).queryByTestId('dummy-contract-placeholder');
+      const contractSignButton = within(modal).getByRole('button', { name: 'Sign' });
+
+      // Sign the contract.
+      await user.click(contractSignButton);
+
+      // Fake loading screen.
+      within(modal).queryByRole('header', { name: 'Signing the contract ...' });
+      within(modal).queryByRole('status');
+
+      // Mock polling request.
+      let calls = 0;
+      const orderDeferredFirst = new Deferred();
+      const orderDeferredSecond = new Deferred();
+      fetchMock.get(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`, () => {
+        calls++;
+        if (calls === 1) {
+          return orderDeferredFirst.promise;
+        }
+        return orderDeferredSecond.promise;
+      });
+
+      expect(fetchMock.calls(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`).length).toBe(
+        0,
+      );
+
+      // Polling starts and succeeds after the second call.
+      await act(async () => {
+        // We prefer advanceTimersByTime over runOnlyPendingTimers, because the latter would trigger internal
+        // react-query garbage collection, which is not what we want as we want to make sure the cache is well
+        // handled by fetchEntity ( useUnionResources ) by verifying that isInvalidated is true. ( Otherwise we would
+        // have got a undefined getQueryState(...) result. That's why we test that the "Sign" button from the
+        // courses view is well removed.
+        jest.advanceTimersByTime(CONTRACT_SETTINGS.pollInterval + 50);
+      });
+      await within(modal).findByRole('heading', { name: 'Verifying signature ...' });
+      within(modal).queryByRole('status');
+
+      // Verify the route has been called.
+      expect(fetchMock.calls(`https://joanie.endpoint/api/v1.0/orders/${order.id}/`).length).toBe(
+        1,
+      );
+
+      // Resolve the first request.
+      await act(async () => {
+        orderDeferredFirst.resolve({
+          ...order,
+          contract: undefined,
+        });
+      });
+
+      // Still displaying pending message.
+      await within(modal).findByRole('heading', { name: 'Verifying signature ...' });
+      within(modal).queryByRole('status');
+
+      // Fast-forward the second polling request.
+      await act(async () => {
+        // We prefer advanceTimersByTime over runOnlyPendingTimers, because the latter would trigger internal
+        // react-query garbage collection, which is not what we want as we want to make sure the cache is well
+        // handled by fetchEntity ( useUnionResources ) by verifying that isInvalidated is true. ( Otherwise we would
+        // have got a undefined getQueryState(...) result. That's why we test that the "Sign" button from the
+        // courses view is well removed.
+        jest.advanceTimersByTime(CONTRACT_SETTINGS.pollInterval + 50);
+      });
+
+      // We update the orders mock in order to return a signed contract before resolving the polling.
+      const signedOrderDeferred = new Deferred();
+      fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', signedOrderDeferred.promise, {
+        overwriteRoutes: true,
+      });
+
+      // Resolve the second request.
+      await act(async () => {
+        orderDeferredSecond.resolve({
+          ...order,
+          contract: {
+            ...order.contract,
+            student_signed_on: new Date().toISOString(),
+          },
+        });
+      });
+
+      // We have the success message.
+      await screen.findByRole('heading', { name: 'Congratulations!' });
+      screen.getByText(
+        'You will receive an email once your contract will be fully signed. You can now enroll in your course runs!',
+      );
+      const nextButton = screen.getByRole('button', { name: 'Next' });
+
+      // Next closes the modal.
+      await user.click(nextButton);
+
+      // Contract sign button must prevent any interaction, waiting for order re-fetch.
+      const orderDetailsSignButton = within(
+        screen.getByTestId(`dashboard-item-contract-${order.id}`),
+      ).getByRole('button', {
+        name: 'Sign',
+      });
+      expect(orderDetailsSignButton).toHaveAttribute('disabled');
+
+      // Resolve the refresh order request.
+      const signedOrder = {
+        ...order,
+        contract: {
+          ...order.contract,
+          student_signed_on: new Date().toISOString(),
+        },
+      };
+      signedOrderDeferred.resolve({
+        results: [signedOrder],
+        next: null,
+        previous: null,
+        count: null,
+      });
+
+      // Contract signing is removed.
+      await waitFor(() =>
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument(),
+      );
+
+      // Go back to the list view to make sure the sign button is not shown anymore.
+      fetchMock.get(
+        'https://joanie.endpoint/api/v1.0/orders/?product_type=credential&state_exclude=canceled&page=1&page_size=50',
+        { results: [signedOrder], next: null, previous: null, count: null },
+        { overwriteRoutes: true },
+      );
+
+      const $backButton = screen.getByRole('link', { name: /Back/ });
+      await user.click($backButton);
+
+      await expectSpinner('Loading orders and enrollments...');
+      await expectNoSpinner('Loading orders and enrollments...');
+
+      expect(
+        await screen.findByRole('heading', { level: 5, name: product.title }),
+      ).toBeInTheDocument();
+
+      // Make sure the sign button is not shown.
+      expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+    });
+  });
+});

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderReadonly.stories.tsx

@@ -1,13 +1,17 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
-import { Order, OrderState, Product, TargetCourse } from 'types/Joanie';
-import { OrderFactory, ProductFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
+import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
+import {
+  CredentialOrderFactory,
+  ProductFactory,
+  TargetCourseFactory,
+} from 'utils/test/factories/joanie';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { enrollment } from '../stories.mock';
 import { DashboardItemOrder } from './DashboardItemOrder';
 
-const order: Order = { ...OrderFactory().one(), target_courses: [] };
+const order: CredentialOrder = CredentialOrderFactory({ target_courses: [] }).one();
 const product: Product = ProductFactory().one();
 const targetsCourses: TargetCourse[] = TargetCourseFactory().many(3);
 
@@ -33,7 +37,7 @@ export default {
       />,
       {
         queriesCallback: (queries) => {
-          queries.push(QueryStateFactory(['product', order.product], { data: product }));
+          queries.push(QueryStateFactory(['product', order.product_id], { data: product }));
         },
       },
     ),
@@ -60,7 +64,7 @@ export const MultipleTargetCourses: Story = {
     order: {
       ...order,
       target_courses: targetsCourses,
-      enrollments: [
+      target_enrollments: [
         {
           ...enrollment,
           course_run: { ...targetsCourses[1].course_runs[0] },

package/js/widgets/Dashboard/components/DashboardItem/Order/DashboardItemOrderWritable.stories.tsx

@@ -1,12 +1,16 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Order, OrderState, Product, TargetCourse } from 'types/Joanie';
+import { CredentialOrder, OrderState, Product, TargetCourse } from 'types/Joanie';
 import { QueryStateFactory } from 'utils/test/factories/reactQuery';
-import { OrderFactory, ProductFactory, TargetCourseFactory } from 'utils/test/factories/joanie';
+import {
+  CredentialOrderFactory,
+  ProductFactory,
+  TargetCourseFactory,
+} from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { enrollment } from '../stories.mock';
 import { DashboardItemOrder } from './DashboardItemOrder';
 
-const order: Order = { ...OrderFactory().one(), target_courses: [] };
+const order: CredentialOrder = CredentialOrderFactory({ target_courses: [] }).one();
 const product: Product = ProductFactory().one();
 const targetsCourses: TargetCourse[] = TargetCourseFactory().many(3);
 
@@ -23,7 +27,7 @@ export default {
   render: (args) =>
     StorybookHelper.wrapInApp(<DashboardItemOrder {...args} />, {
       queriesCallback: (queries) => {
-        queries.push(QueryStateFactory(['product', order.product], { data: product }));
+        queries.push(QueryStateFactory(['product', order.product_id], { data: product }));
       },
     }),
 } as Meta<typeof DashboardItemOrder>;
@@ -54,8 +58,8 @@ export const MultipleTargetCourses: Story = {
   args: {
     order: {
       ...order,
-      target_courses: [...targetsCourses, { ...TargetCourseFactory().one(), course_runs: [] }],
-      enrollments: [
+      target_courses: [...targetsCourses, TargetCourseFactory({ course_runs: [] }).one()],
+      target_enrollments: [
         {
           ...enrollment,
           course_run: { ...targetsCourses[1].course_runs[0] },

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

@@ -0,0 +1,121 @@
+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 OrderStateMessage, { 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>
+  );
+
+  it.each([
+    [OrderState.DRAFT, 'Draft'],
+    [OrderState.SUBMITTED, 'Submitted'],
+    [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>
+          <OrderStateMessage order={order} />
+        </Wrapper>,
+      );
+      expect(screen.getByText(expectedMessage)).toBeInTheDocument();
+    },
+  );
+
+  it.each([
+    [OrderState.DRAFT, 'Draft'],
+    [OrderState.SUBMITTED, 'Submitted'],
+    [OrderState.PENDING, 'Pending'],
+    [OrderState.CANCELED, 'Canceled'],
+  ])(
+    'should display message from order state: %s when order have no contract',
+    (state, expectedMessage) => {
+      const orderWithContract = CredentialOrderFactory({
+        state,
+        contract: ContractFactory().one(),
+      }).one();
+      render(
+        <Wrapper>
+          <OrderStateMessage order={orderWithContract} />
+        </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>
+        <OrderStateMessage order={order} contractDefinition={contractDefinition} />
+      </Wrapper>,
+    );
+    expect(screen.getByText('Signature required')).toBeInTheDocument();
+  });
+
+  it("should display message for validated order that don't have a generated certificate", () => {
+    const order = CredentialOrderFactory({
+      state: OrderState.VALIDATED,
+      contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
+      certificate_id: undefined,
+    }).one();
+    render(
+      <Wrapper>
+        <OrderStateMessage 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,
+      contract: ContractFactory({ student_signed_on: new Date().toISOString() }).one(),
+      certificate_id: 'FAKE_CERTIFICATE_ID',
+    }).one();
+    render(
+      <Wrapper>
+        <OrderStateMessage order={order} />
+      </Wrapper>,
+    );
+    expect(
+      screen.getByText(intl.formatMessage(messages.statusCompleted), {
+        exact: false,
+      }),
+    );
+  });
+});

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

@@ -0,0 +1,98 @@
+import { FormattedMessage, defineMessages } from 'react-intl';
+import { useEffect } from 'react';
+import { CertificateOrder, CredentialOrder, OrderState, ContractDefinition } from 'types/Joanie';
+import { StringHelper } from 'utils/StringHelper';
+import { handle } from 'utils/errors/handle';
+import { OrderHelper } 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 {
+  order: CredentialOrder | CertificateOrder;
+  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,
+  };
+
+  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]} />;
+  }
+
+  return (
+    <FormattedMessage
+      {...messages.statusOther}
+      values={{ state: StringHelper.capitalizeFirst(order.state) }}
+    />
+  );
+};
+
+export default OrderStateMessage;

package/js/widgets/Dashboard/components/DashboardItem/Order/_styles.scss

@@ -0,0 +1,43 @@
+.dashboard-item-order {
+  > .dashboard-item,
+  .dashboard__contract-item {
+    padding-top: rem-calc(16px);
+    &:first-child {
+      padding-top: 0;
+    }
+  }
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    min-height: 3.75rem;
+    border-bottom: $onepixel solid r-theme-val(dashboard-item, base-border);
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    @include media-breakpoint-down(sm) {
+      flex-direction: column;
+
+      .button {
+        width: 100%;
+      }
+    }
+
+    .button {
+      flex-shrink: 0;
+    }
+  }
+
+  .dashboard__contract-item {
+    .dashboard-item__block__head__title {
+      display: flex;
+      align-items: center;
+
+      .c__loader {
+        margin-right: 1rem;
+      }
+    }
+  }
+}