richie-education 2.24.0 → 2.25.0-b2.dev101

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

@@ -0,0 +1,197 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import { MemoryRouter } from 'react-router-dom';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { Contract, NestedCredentialOrder } from 'types/Joanie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { SessionProvider } from 'contexts/SessionContext';
+import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract/index';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import {
+  ContractFactory,
+  CredentialOrderFactory,
+  NestedCredentialOrderFactory,
+} from 'utils/test/factories/joanie';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.test' },
+    joanie_backend: { endpoint: 'https://joanie.test' },
+  }).one(),
+}));
+
+describe.each([
+  {
+    label: 'with NestedCredentialOrder',
+    OrderSerializer: NestedCredentialOrderFactory,
+  },
+  {
+    label: 'with CredentialOrderFactory',
+    OrderSerializer: CredentialOrderFactory,
+  },
+])('<DashboardContract/> $label', ({ OrderSerializer }) => {
+  const Wrapper = ({ children }: PropsWithChildren) => {
+    return (
+      <QueryClientProvider client={createTestQueryClient({ user: true })}>
+        <IntlProvider locale="en">
+          <SessionProvider>
+            <MemoryRouter>{children}</MemoryRouter>
+          </SessionProvider>
+        </IntlProvider>
+      </QueryClientProvider>
+    );
+  };
+
+  beforeAll(() => {
+    // eslint-disable-next-line compat/compat
+    URL.createObjectURL = jest.fn();
+  });
+
+  beforeEach(() => {
+    fetchMock.get('https://joanie.test/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.test/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it.each([
+    { label: 'writable', writable: true },
+    { label: 'none-writable', writable: false },
+  ])("render a $label learner's signed contract", async ({ writable }) => {
+    const signedDate = faker.date.past().toISOString();
+    const contract: Contract = ContractFactory({
+      student_signed_on: signedDate,
+      organization_signed_on: null,
+      order: OrderSerializer().one(),
+    }).one();
+    render(
+      <DashboardItemContract
+        title={contract.order.product_title}
+        order={contract.order as NestedCredentialOrder}
+        contract_definition={contract.definition}
+        contract={contract}
+        writable={writable}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
+    expect(screen.getByText(contract.order.product_title)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'You signed this training contract. Signed on ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(signedDate)),
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+  });
+
+  it.each([
+    { label: 'writable', writable: true },
+    { label: 'none-writable', writable: false },
+  ])("render a $label organization's signed contract", async ({ writable }) => {
+    const signedDate = faker.date.past().toISOString();
+    const contract: Contract = ContractFactory({
+      student_signed_on: signedDate,
+      organization_signed_on: faker.date.past().toISOString(),
+      order: OrderSerializer().one(),
+    }).one();
+    render(
+      <DashboardItemContract
+        title={contract.order.product_title}
+        order={contract.order as NestedCredentialOrder}
+        contract_definition={contract.definition}
+        contract={contract}
+        writable={writable}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(await screen.findByText(contract.definition.title)).toBeInTheDocument();
+    expect(screen.getByText(contract.order.product_title)).toBeInTheDocument();
+    expect(
+      screen.getByText(
+        'You signed this training contract. Signed on ' +
+          new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(new Date(signedDate)),
+      ),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
+  });
+
+  it('render a writable unsigned signed contract', async () => {
+    const contract: Contract = ContractFactory({
+      student_signed_on: null,
+      organization_signed_on: null,
+      order: OrderSerializer().one(),
+    }).one();
+    render(
+      <DashboardItemContract
+        title={contract.order.product_title}
+        order={contract.order as NestedCredentialOrder}
+        contract_definition={contract.definition}
+        contract={contract}
+        writable={true}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    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.'),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole('button', { name: 'Sign' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+  });
+
+  it('render a none-writable unsigned signed contract', async () => {
+    const contract: Contract = ContractFactory({
+      student_signed_on: null,
+      organization_signed_on: null,
+      order: OrderSerializer().one(),
+    }).one();
+    render(
+      <DashboardItemContract
+        title={contract.order.product_title}
+        order={contract.order as NestedCredentialOrder}
+        contract_definition={contract.definition}
+        contract={contract}
+        writable={false}
+      />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    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.'),
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole('link', { name: 'Sign' })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DashboardItemContract } from 'widgets/Dashboard/components/DashboardItem/Contract/index';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { Contract, NestedCredentialOrder } from 'types/Joanie';
+import { ContractFactory, NestedCredentialOrderFactory } from 'utils/test/factories/joanie';
+
+export default {
+  title: 'Widgets/Dashboard/Contract',
+  component: DashboardItemContract,
+  parameters: {
+    docs: {
+      source: {
+        code: 'Disabled for this story, see https://github.com/storybookjs/storybook/issues/11554',
+      },
+    },
+  },
+  render: (args) => StorybookHelper.wrapInApp(<DashboardItemContract {...args} />),
+} as Meta<typeof DashboardItemContract>;
+
+type Story = StoryObj<typeof DashboardItemContract>;
+
+const contract: Contract = ContractFactory({
+  order: NestedCredentialOrderFactory().one(),
+}).one();
+
+export const Default: Story = {
+  args: {
+    contract,
+    title: contract.order.product_title,
+    order: contract.order as NestedCredentialOrder,
+    contract_definition: contract.definition,
+    writable: true,
+  },
+};

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

@@ -0,0 +1,53 @@
+import { Icon, IconTypeEnum } from 'components/Icon';
+import { Contract, ContractDefinition, CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import ContractStatus from 'components/ContractStatus';
+import SignContractButton from 'components/SignContractButton';
+import { DashboardItem, DashboardItemProps } from '..';
+
+interface DashboardItemContractProps {
+  title: string;
+  order: CredentialOrder | NestedCredentialOrder;
+  contract_definition: ContractDefinition;
+  contract?: Contract;
+  writable: boolean;
+  mode?: DashboardItemProps['mode'];
+}
+export const DashboardItemContract = ({
+  title,
+  order,
+  contract,
+  contract_definition,
+  writable,
+  mode,
+}: DashboardItemContractProps) => {
+  return (
+    <DashboardItem
+      data-testid={`dashboard-item-contract-${order.id}`}
+      mode={mode}
+      title={title}
+      code={`Ref. ${order.course.code}`}
+      imageFile={order.course.cover}
+      footer={
+        <>
+          <div className="dashboard-contract__body">
+            <Icon name={IconTypeEnum.UNIVERSITY} />
+            <span>{contract_definition.title}</span>
+          </div>
+          <div className="dashboard-contract__footer">
+            <span className="dashboard-contract__footer__status">
+              <ContractStatus contract={contract} />
+            </span>
+            <div>
+              <SignContractButton
+                order={order}
+                contract={contract}
+                writable={writable}
+                className="dashboard-item__button"
+              />
+            </div>
+          </div>
+        </>
+      }
+    />
+  );
+};

package/js/widgets/Dashboard/components/DashboardItem/CourseEnrolling/hooks/useCourseRunPeriodMessage.ts

@@ -0,0 +1,76 @@
+import { defineMessages, useIntl } from 'react-intl';
+import useDateRelative from 'hooks/useDateRelative';
+import { Priority } from 'types';
+import { CourseRun } from 'types/Joanie';
+import useDateFormat, { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+
+const messages = defineMessages({
+  onGoingRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingRunPeriod',
+    description: 'Text to display when a course run is on going.',
+    defaultMessage: 'This session started on {startDate} and will end on {endDate}',
+  },
+  futureRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureRunPeriod',
+    description: 'Text to display the period of a future course run.',
+    defaultMessage: 'This session starts {relativeStartDate}, the {startDate}',
+  },
+  onGoingEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.onGoingEnrolledRunPeriod',
+    description: 'Text to display when a course run is ongoing and the user is enrolled to.',
+    defaultMessage: "You are enrolled for this session. It's open from {startDate} to {endDate}",
+  },
+  futureEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.futureEnrolledRunPeriod',
+    description: 'Text to display when a course run is not yet opened and the user is enrolled to.',
+    defaultMessage:
+      'You are enrolled for this session. It starts {relativeStartDate}, the {startDate}.',
+  },
+  archivedEnrolledRunPeriod: {
+    id: 'components.useCourseRunPeriodMessage.archivedEnrolledRunPeriod',
+    description: 'Text to display when a course run is archived and the user is enrolled to.',
+    defaultMessage: 'You are enrolled for this session.',
+  },
+});
+
+const useCourseRunPeriodMessage = (courseRun: CourseRun, enrolled: boolean = false) => {
+  const intl = useIntl();
+  const formatDate = useDateFormat();
+
+  const relativeStartDate = useDateRelative(new Date(courseRun.start));
+  const startDate = formatDate(courseRun.start, DEFAULT_DATE_FORMAT);
+  const endDate = formatDate(courseRun.end, DEFAULT_DATE_FORMAT);
+  const isArchived = [Priority.ARCHIVED_CLOSED, Priority.ARCHIVED_OPEN].includes(
+    courseRun.state.priority,
+  );
+  const isOnGoing = [Priority.ONGOING_OPEN, Priority.ONGOING_CLOSED].includes(
+    courseRun.state.priority,
+  );
+  if (enrolled) {
+    if (isArchived) {
+      return intl.formatMessage(messages.archivedEnrolledRunPeriod);
+    }
+    if (isOnGoing) {
+      return intl.formatMessage(messages.onGoingEnrolledRunPeriod, {
+        startDate,
+        endDate,
+      });
+    }
+    return intl.formatMessage(messages.futureEnrolledRunPeriod, {
+      relativeStartDate,
+      startDate,
+    });
+  }
+  if (isOnGoing) {
+    return intl.formatMessage(messages.onGoingRunPeriod, {
+      startDate,
+      endDate,
+    });
+  }
+  return intl.formatMessage(messages.futureRunPeriod, {
+    relativeStartDate,
+    startDate,
+  });
+};
+
+export default useCourseRunPeriodMessage;

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

@@ -0,0 +1,158 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import { PropsWithChildren } from 'react';
+import { CredentialOrderFactory, EnrollmentFactory } from 'utils/test/factories/joanie';
+import { Priority } from 'types';
+import { CourseRun, Enrollment } from 'types/Joanie';
+import { DEFAULT_DATE_FORMAT } from 'hooks/useDateFormat';
+import { CourseRunFactoryFromPriority } from 'utils/test/factories/richie';
+import { noop } from 'utils';
+import { computeState } from 'utils/CourseRuns';
+import { formatRelativeDate } from 'utils/relativeDate';
+import { DashboardItemCourseEnrollingRun, Enrolled } from '.';
+
+/**
+ * Most of the component of this file are tested from DashboardItemEnrollment.spec.tsx and
+ * DashboardItemOrder.spec.tsx. But here are some tests that are more straightforward.
+ */
+describe('<Enrolled/>', () => {
+  const wrapper = ({ children }: PropsWithChildren) => {
+    return <IntlProvider locale="en">{children}</IntlProvider>;
+  };
+
+  it.each([
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_OPEN,
+      priorityLabel: 'ONGOING_OPEN',
+      expectButton: true,
+      expectLabelTemplate:
+        "You are enrolled for this session. It's open from %fromDate% to %toDate%",
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_OPEN,
+      priorityLabel: 'FUTURE_OPEN',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_OPEN,
+      priorityLabel: 'ARCHIVED_OPEN',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_NOT_YET_OPEN,
+      priorityLabel: 'FUTURE_NOT_YET_OPEN',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.FUTURE_CLOSED,
+      priorityLabel: 'FUTURE_CLOSED',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ONGOING_CLOSED,
+      priorityLabel: 'ONGOING_CLOSED',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session. It's open from %fromDate% to %toDate%`,
+    },
+    {
+      buttonTestLabel: 'and access course button',
+      priority: Priority.ARCHIVED_CLOSED,
+      priorityLabel: 'ARCHIVED_CLOSED',
+      expectButton: true,
+      expectLabelTemplate: `You are enrolled for this session.`,
+    },
+    {
+      buttonTestLabel: 'and no access course button',
+      priority: Priority.TO_BE_SCHEDULED,
+      priorityLabel: 'TO_BE_SCHEDULED',
+      expectButton: false,
+      expectLabelTemplate:
+        'You are enrolled for this session. It starts %fromRelativeDate%, the %fromDate%.',
+    },
+  ])(
+    'handles enrollments with priority=$priorityLabel $buttonTestLabel',
+    async ({ priority, expectButton, expectLabelTemplate }) => {
+      const enrollment: Enrollment = EnrollmentFactory().one();
+      enrollment.course_run.state.priority = priority;
+      render(<Enrolled enrollment={enrollment} />, { wrapper });
+      const intl = createIntl({ locale: 'en' });
+
+      const fromDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.start),
+      );
+      const fromRelativeDate = formatRelativeDate(
+        new Date(enrollment.course_run.start),
+        new Date(),
+        intl.locale,
+      );
+      const toDate = new Intl.DateTimeFormat('en', DEFAULT_DATE_FORMAT).format(
+        new Date(enrollment.course_run.end),
+      );
+
+      const expectLabel = expectLabelTemplate
+        .replace('%fromRelativeDate%', fromRelativeDate)
+        .replace('%fromDate%', fromDate)
+        .replace('%toDate%', toDate);
+      expect(await screen.findByText(expectLabel)).toBeInTheDocument();
+      if (expectButton) {
+        const link = screen.getByRole('link', { name: 'Access to course' });
+        expect(link).toBeEnabled();
+        expect(link).toHaveAttribute('href', enrollment.course_run.resource_link);
+      } else {
+        expect(screen.queryByRole('link', { name: 'Access to course' })).toBeNull();
+      }
+    },
+  );
+});
+
+describe('<DashboardItemCourseEnrollingRun/>', () => {
+  it.each([
+    [Priority.ONGOING_OPEN, false],
+    [Priority.FUTURE_OPEN, false],
+    [Priority.ARCHIVED_OPEN, false],
+    [Priority.FUTURE_NOT_YET_OPEN, true],
+    [Priority.FUTURE_CLOSED, false],
+    [Priority.ONGOING_CLOSED, false],
+    [Priority.ARCHIVED_CLOSED, false],
+    [Priority.TO_BE_SCHEDULED, false],
+  ])(
+    `handles correctly enrollment_start date displaying with priority=%s`,
+    async (priority, expectEnrollmentNotYetOpened) => {
+      const order = CredentialOrderFactory().one();
+      const courseRun = CourseRunFactoryFromPriority(priority)().one();
+      courseRun.state = computeState(courseRun);
+      const joanieCourseRun = courseRun as unknown as CourseRun;
+      joanieCourseRun.course = order.course;
+
+      render(
+        <IntlProvider locale="en">
+          <DashboardItemCourseEnrollingRun
+            order={order}
+            courseRun={joanieCourseRun}
+            selected={false}
+            enroll={noop}
+          />
+        </IntlProvider>,
+      );
+
+      if (expectEnrollmentNotYetOpened) {
+        screen.getByText(/Enrollment will open on/);
+      } else {
+        expect(screen.queryByText(/Enrollment will open on/)).not.toBeInTheDocument();
+      }
+    },
+  );
+});

package/js/widgets/Dashboard/components/DashboardItem/{DashboardItemCourseEnrolling.stories.tsx → CourseEnrolling/index.stories.tsx}

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { faker } from '@faker-js/faker';
-import { CourseLightFactory } from 'utils/test/factories/joanie';
+import { TargetCourseFactory } from 'utils/test/factories/joanie';
 import { StorybookHelper } from 'utils/StorybookHelper';
 import { Priority } from 'types';
-import { enrollment } from './stories.mock';
-import { DashboardItemCourseEnrolling } from './DashboardItemCourseEnrolling';
+import { enrollment } from '../stories.mock';
+import { DashboardItemCourseEnrolling } from '.';
 
 export default {
   component: DashboardItemCourseEnrolling,
@@ -39,7 +39,7 @@ type Story = StoryObj<typeof DashboardItemCourseEnrolling>;
 
 export const ReadonlyEnrolledOpened: Story = {
   args: {
-    course: CourseLightFactory().one(),
+    course: TargetCourseFactory().one(),
     activeEnrollment: {
       ...enrollment,
       course_run: {
@@ -53,7 +53,7 @@ export const ReadonlyEnrolledOpened: Story = {
 
 export const ReadonlyEnrolledClosed: Story = {
   args: {
-    course: CourseLightFactory().one(),
+    course: TargetCourseFactory().one(),
     activeEnrollment: {
       ...enrollment,
       course_run: {
@@ -67,6 +67,6 @@ export const ReadonlyEnrolledClosed: Story = {
 
 export const ReadonlyNotEnrolled: Story = {
   args: {
-    course: CourseLightFactory().one(),
+    course: TargetCourseFactory().one(),
   },
 };