richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/index.spec.tsx

@@ -0,0 +1,215 @@
+import fetchMock from 'fetch-mock';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider, createIntl } from 'react-intl';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { PropsWithChildren } from 'react';
+import { CourseListItem, CourseProductRelation, Organization } from 'types/Joanie';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  UserFactory,
+} from 'utils/test/factories/richie';
+import {
+  TEACHER_DASHBOARD_ROUTE_LABELS,
+  TeacherDashboardPaths,
+} from 'widgets/Dashboard/utils/teacherRouteMessages';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+
+import {
+  CourseFactory,
+  CourseProductRelationFactory,
+  OrganizationFactory,
+} from 'utils/test/factories/joanie';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import { TeacherDashboardCourseSidebar, messages } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+jest.mock('utils/indirection/window', () => ({
+  location: {
+    replace: jest.fn(),
+  },
+}));
+
+const intl = createIntl({ locale: 'en' });
+
+interface RenderTeacherDashboardCourseSidebarProps {
+  courseId: CourseListItem['id'];
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const Wrapper = ({
+  children,
+  courseId,
+  organizationId,
+  courseProductRelationId,
+}: PropsWithChildren<RenderTeacherDashboardCourseSidebarProps>) => {
+  let routePath = '/:courseId';
+  let initialEntry = `/${courseId}`;
+
+  if (courseProductRelationId) {
+    routePath += '/:courseProductRelationId';
+    initialEntry += `/${courseProductRelationId}`;
+  }
+  if (organizationId) {
+    routePath = '/:organizationId' + routePath;
+    initialEntry = `/${organizationId}` + initialEntry;
+  }
+  return (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
+        <JoanieSessionProvider>
+          <CunninghamProvider>
+            <MemoryRouter initialEntries={[initialEntry]}>
+              <Routes>
+                <Route path={routePath} element={children} />
+              </Routes>
+            </MemoryRouter>
+          </CunninghamProvider>
+        </JoanieSessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+};
+
+describe('<TeacherDashboardCourseSidebar/>', () => {
+  let nbApiRequest: number;
+  beforeEach(() => {
+    // JoanieSessionProvider inital requests
+    nbApiRequest = 3;
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('should display syllabus link', async () => {
+    const course: CourseListItem = CourseFactory().one();
+    fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
+    nbApiRequest += 1; // call to course
+
+    render(
+      <Wrapper courseId={course.id}>
+        <TeacherDashboardCourseSidebar />
+      </Wrapper>,
+    );
+
+    await expectNoSpinner('Loading course...');
+    const link = screen.getByRole('link', {
+      name: intl.formatMessage(messages.syllabusLinkLabel),
+    });
+    expect(link).toHaveAttribute('href', `/redirects/courses/${course.code}`);
+  });
+
+  it.each([
+    {
+      label: 'course',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: 'training',
+      course: CourseFactory().one(),
+      organization: undefined,
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.COURSE_PRODUCT,
+        TeacherDashboardPaths.COURSE_CONTRACTS,
+      ],
+    },
+    {
+      label: "organization's course",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: undefined,
+      expectedRoutes: [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION],
+    },
+    {
+      label: "organization's training",
+      course: CourseFactory().one(),
+      organization: OrganizationFactory().one(),
+      courseProductRelation: CourseProductRelationFactory().one(),
+      expectedRoutes: [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ],
+    },
+  ])(
+    'should display menu items for "$label" route',
+    async ({ course, organization, courseProductRelation, expectedRoutes }) => {
+      // mock api for organization's training
+      if (organization && courseProductRelation) {
+        // fetching training's contracts
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?course_product_relation_id=${courseProductRelation.id}&signature_state=half_signed&page=1&page_size=25`,
+          [],
+        );
+        // fetching organization's training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else if (organization) {
+        // fetching organization's course
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/${course.id}/`,
+          course,
+        );
+      } else if (courseProductRelation) {
+        // fetching training
+        nbApiRequest += 1;
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
+          courseProductRelation,
+        );
+      } else {
+        // mock api for course
+        nbApiRequest += 1;
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/courses/${course.id}/`, course);
+      }
+
+      render(
+        <Wrapper
+          courseId={course.id}
+          courseProductRelationId={courseProductRelation ? courseProductRelation.id : undefined}
+          organizationId={organization ? organization.id : undefined}
+        >
+          <TeacherDashboardCourseSidebar />
+        </Wrapper>,
+      );
+
+      await expectNoSpinner('Loading course...');
+      expectedRoutes.forEach((expectedRoute) => {
+        expect(
+          screen.getByRole('link', {
+            name: intl.formatMessage(TEACHER_DASHBOARD_ROUTE_LABELS[expectedRoute]),
+          }),
+        ).toBeInTheDocument();
+      });
+
+      expect(screen.queryByTestId('organization-links')).not.toBeInTheDocument();
+
+      let nbExpectedLinks = expectedRoutes.length;
+      nbExpectedLinks += 1; // link to syllabus
+      expect(screen.getAllByRole('link')).toHaveLength(nbExpectedLinks);
+      expect(fetchMock.calls()).toHaveLength(nbApiRequest);
+    },
+  );
+});

package/js/widgets/Dashboard/components/{TeacherCourseDashboardSidebar → TeacherDashboardCourseSidebar}/index.tsx

@@ -2,8 +2,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
-import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import { DashboardSidebar } from 'widgets/Dashboard/components/DashboardSidebar';
+import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
@@ -12,35 +11,43 @@ import { useCourse } from 'hooks/useCourses';
 import { Spinner } from 'components/Spinner';
 import { Icon, IconTypeEnum } from 'components/Icon';
 import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
+import { getMenuRoutes } from './utils';
 
 export const messages = defineMessages({
   header: {
-    id: 'components.TeacherCourseDashboardSidebar.header',
+    id: 'components.TeacherDashboardCourseSidebar.header',
     description: 'Title of the course dashboard sidebar',
     defaultMessage: '{courseTitle}',
   },
   subHeader: {
-    id: 'components.TeacherCourseDashboardSidebar.subHeader',
+    id: 'components.TeacherDashboardCourseSidebar.subHeader',
     description: 'Sub title of the course dashboard sidebar',
     defaultMessage: 'You are on the course dashboard',
   },
   syllabusLinkLabel: {
-    id: 'components.TeacherCourseDashboardSidebar.syllabusLinkLabel',
+    id: 'components.TeacherDashboardCourseSidebar.syllabusLinkLabel',
     description: 'Syllabus link label',
     defaultMessage: 'Go to syllabus',
   },
   loading: {
     defaultMessage: 'Loading course...',
     description: 'Message displayed while loading a course',
-    id: 'components.TeacherCourseDashboardSidebar.loading',
+    id: 'components.TeacherDashboardCourseSidebar.loading',
   },
 });
 
-export const TeacherCourseDashboardSidebar = () => {
+export const TeacherDashboardCourseSidebar = () => {
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { courseId, courseProductRelationId = '' } = useParams<{
+  const {
+    organizationId: routeOrganizationId,
+    courseId: routeCourseId,
+    courseProductRelationId: routeCourseProductRelationId = '',
+  } = useParams<{
+    organizationId?: string;
     courseId: string;
     courseProductRelationId: string;
   }>();
@@ -48,11 +55,23 @@ export const TeacherCourseDashboardSidebar = () => {
   const {
     item: singleCourse,
     states: { fetching: courseFetching },
-  } = useCourse(courseId!);
+  } = useCourse(
+    routeCourseId,
+    { organization_id: routeOrganizationId },
+    { enabled: !routeCourseProductRelationId },
+  );
+
   const {
     item: courseProductRelation,
     states: { fetching: courseProductRelationFetching },
-  } = useCourseProductRelation(courseProductRelationId);
+  } = useCourseProductRelation(
+    routeCourseProductRelationId,
+    {
+      organization_id: routeOrganizationId,
+    },
+    { enabled: !!routeCourseProductRelationId },
+  );
+
   const fetching = useMemo(
     () => courseFetching || courseProductRelationFetching,
     [courseFetching, courseProductRelationFetching],
@@ -66,25 +85,48 @@ export const TeacherCourseDashboardSidebar = () => {
     [courseProductRelation, singleCourse],
   );
 
-  const menuLinks = [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION].map((path) => ({
-    to: getRoutePath(path, { courseId }),
-    label: getRouteLabel(path),
-  }));
-
-  if (courseProductRelationId) {
-    menuLinks.shift();
-    menuLinks.unshift({
-      to: getRoutePath(TeacherDashboardPaths.COURSE_PRODUCT, {
-        courseId,
-        courseProductRelationId,
-      }),
-      label: getRouteLabel(TeacherDashboardPaths.COURSE_PRODUCT),
+  const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
+    const path = getRoutePath(basePath, {
+      organizationId: routeOrganizationId,
+      courseId: routeCourseId,
+      courseProductRelationId: routeCourseProductRelationId,
     });
-  }
+
+    const menuLink: MenuLink = {
+      to: path,
+      label: getRouteLabel(basePath),
+    };
+
+    if (
+      [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+        TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
+      ].includes(basePath)
+    ) {
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={routeOrganizationId}
+          courseProductRelationId={routeCourseProductRelationId}
+        />
+      );
+    }
+
+    return menuLink;
+  };
+
+  const menuLinkList = useMemo(
+    () =>
+      getMenuRoutes({
+        courseProductRelationId: routeCourseProductRelationId,
+        organizationId: routeOrganizationId,
+      }).map(getMenuLinkFromPath),
+    [routeOrganizationId, routeCourseProductRelationId],
+  );
 
   return (
     <DashboardSidebar
-      menuLinks={menuLinks}
+      menuLinks={menuLinkList}
       header={
         course === undefined
           ? ''
@@ -103,12 +145,14 @@ export const TeacherCourseDashboardSidebar = () => {
           </span>
         </Spinner>
       ) : (
-        <a className="syllabus-link" href={`/${intl.locale.split('-')[0]}/courses/${course.code}`}>
-          <Icon name={IconTypeEnum.LOGOUT_SQUARE} />
-          <span>
-            <FormattedMessage {...messages.syllabusLinkLabel} />
-          </span>
-        </a>
+        course && (
+          <a className="syllabus-link" href={`/redirects/courses/${course.code}`}>
+            <Icon name={IconTypeEnum.LOGOUT_SQUARE} size="small" />
+            <span>
+              <FormattedMessage {...messages.syllabusLinkLabel} />
+            </span>
+          </a>
+        )
       )}
     </DashboardSidebar>
   );

package/js/widgets/Dashboard/components/TeacherDashboardCourseSidebar/utils.ts

@@ -0,0 +1,23 @@
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+
+interface GetMenuRoutesArgs {
+  courseProductRelationId?: string;
+  organizationId?: string;
+}
+
+export const getMenuRoutes = ({ courseProductRelationId, organizationId }: GetMenuRoutesArgs) => {
+  if (organizationId) {
+    if (courseProductRelationId) {
+      return [
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT,
+        TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
+      ];
+    }
+    return [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION];
+  }
+
+  if (courseProductRelationId) {
+    return [TeacherDashboardPaths.COURSE_PRODUCT, TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS];
+  }
+  return [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION];
+};

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.spec.tsx

@@ -0,0 +1,154 @@
+import { faker } from '@faker-js/faker';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor } from '@testing-library/react';
+import fetchMock from 'fetch-mock';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { StringHelper } from 'utils/StringHelper';
+import { expectNoSpinner } from 'utils/test/expectSpinner';
+import {
+  RichieContextFactory as mockRichieContextFactory,
+  UserFactory,
+} from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+import { PER_PAGE } from 'settings';
+import { TeacherDashboardOrganizationSidebar } from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<TeacherDashboardOrganizationSidebar />', () => {
+  beforeEach(() => {
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  const Wrapper = ({ organizationId }: { organizationId: string }) => (
+    <IntlProvider locale="en">
+      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
+        <JoanieSessionProvider>
+          <CunninghamProvider>
+            <MemoryRouter initialEntries={['/' + organizationId]}>
+              <Routes>
+                <Route path="/:organizationId" element={<TeacherDashboardOrganizationSidebar />} />
+              </Routes>
+            </MemoryRouter>
+          </CunninghamProvider>
+        </JoanieSessionProvider>
+      </QueryClientProvider>
+    </IntlProvider>
+  );
+
+  it('should render', async () => {
+    const organization = OrganizationFactory({ logo: null }).one();
+
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' + organization.id + '/',
+      organization,
+    );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      { results: [], count: 0, previous: null, next: null },
+    );
+
+    render(<Wrapper organizationId={organization.id} />);
+
+    await expectNoSpinner('Loading organization...');
+
+    // It should display an avatar according to the organization title if there is no logo
+    expect(screen.getByTestId('dashboard-avatar')).toHaveTextContent(
+      StringHelper.abbreviate(organization.title, 3),
+    );
+
+    screen.getByText('You are on the organization dashboard');
+
+    // It should display menu links
+    const links = screen.getAllByRole('link');
+    expect(links).toHaveLength(2);
+    expect(links[0]).toHaveTextContent('Courses');
+    expect(links[1]).toHaveTextContent('Contracts');
+    // No badge should be displayed next to contract link
+    expect(links[1].nextSibling).toBeNull();
+  });
+
+  it('should display contracts count badge if there are contracts to sign and user has abilities to sign', async () => {
+    const organization = OrganizationFactory().one();
+    const contractToSignCount = faker.number.int({ min: 1, max: 5 });
+
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' + organization.id + '/',
+      organization,
+    );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      {
+        results: ContractFactory({ abilities: { sign: true } }).many(contractToSignCount),
+        count: contractToSignCount,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<Wrapper organizationId={organization.id} />);
+    await expectNoSpinner('Loading organization...');
+
+    // It should display contract link with badge next to it displaying the number of contracts to sign
+    const contractLink = screen.getByRole('link', { name: 'Contracts' });
+    await waitFor(() => {
+      expect(contractLink!.nextSibling).toHaveTextContent(contractToSignCount.toString());
+    });
+    expect(contractLink).toHaveAttribute(
+      'href',
+      '/teacher/organizations/' + organization.id + '/contracts?signature_state=half_signed',
+    );
+  });
+
+  it('should not display contracts count badge if there are contracts to sign but the user has abilities to sign', async () => {
+    const organization = OrganizationFactory().one();
+    const contractToSignCount = faker.number.int({ min: 1, max: 5 });
+
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' + organization.id + '/',
+      organization,
+    );
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/organizations/' +
+        organization.id +
+        `/contracts/?signature_state=half_signed&page=1&page_size=${PER_PAGE.teacherContractList}`,
+      {
+        results: ContractFactory({ abilities: { sign: false } }).many(contractToSignCount),
+        count: contractToSignCount,
+        previous: null,
+        next: null,
+      },
+    );
+
+    render(<Wrapper organizationId={organization.id} />);
+    await expectNoSpinner('Loading organization...');
+
+    // It should display contract link with no badge next to it
+    const contractLink = screen.getByRole('link', { name: 'Contracts' });
+    expect(contractLink!.nextSibling).toBeNull();
+    expect(contractLink).toHaveAttribute(
+      'href',
+      '/teacher/organizations/' + organization.id + '/contracts?signature_state=signed',
+    );
+  });
+});

package/js/widgets/Dashboard/components/TeacherDashboardOrganizationSidebar/index.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+import fetchMock from 'fetch-mock';
+import { UserFactory } from 'utils/test/factories/richie';
+import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';
+import { StorybookHelper } from 'utils/StorybookHelper';
+import { ContractFactory, OrganizationFactory } from 'utils/test/factories/joanie';
+
+export default {
+  component: TeacherDashboardOrganizationSidebar,
+  render: () => {
+    const user = UserFactory().one();
+    const organization = OrganizationFactory({ logo: null }).one();
+    const router = createMemoryRouter(
+      [
+        {
+          index: true,
+          path: '/teacher/organizations/:organizationId/',
+          element: <TeacherDashboardOrganizationSidebar />,
+        },
+      ],
+      { initialEntries: [`/teacher/organizations/${organization.id}/`] },
+    );
+
+    fetchMock.get(`http://localhost:8071/api/v1.0/organizations/${organization.id}/`, organization);
+    fetchMock.get(
+      `http://localhost:8071/api/v1.0/organizations/${organization.id}/contracts/?signature_state=half_signed`,
+      {
+        results: ContractFactory({ abilities: { sign: true } }).many(3),
+        count: 3,
+        previous: null,
+        next: null,
+      },
+    );
+
+    return StorybookHelper.wrapInApp(<RouterProvider router={router} />, { user });
+  },
+} as Meta<typeof TeacherDashboardOrganizationSidebar>;
+
+type Story = StoryObj<typeof TeacherDashboardOrganizationSidebar>;
+
+export const TeacherOrganization: Story = {};