richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/{TeacherOrganizationDashboardSidebar → TeacherDashboardOrganizationSidebar}/index.tsx

@@ -1,55 +1,67 @@
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { generatePath, useParams } from 'react-router-dom';
-import { useMemo } from 'react';
-import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
-import {
-  DashboardAvatarPositionEnum,
-  DashboardSidebar,
-} from 'widgets/Dashboard/components/DashboardSidebar';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import { Spinner } from 'components/Spinner';
+import { useOrganization } from 'hooks/useOrganizations';
+import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import {
   getDashboardRouteLabel,
   getDashboardRoutePath,
 } from 'widgets/Dashboard/utils/dashboardRoutes';
-import { useOrganization } from 'hooks/useOrganizations';
-import { Spinner } from 'components/Spinner';
+import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
 import { DashboardAvatar, DashboardAvatarVariantEnum } from '../DashboardAvatar';
+import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 
 const messages = defineMessages({
   subHeader: {
-    id: 'components.TeacherOrganizationDashboardSidebar.subHeader',
+    id: 'components.TeacherDashboardOrganizationSidebar.subHeader',
     description: 'Sub title of the organization dashboard sidebar',
     defaultMessage: 'You are on the organization dashboard',
   },
   loading: {
     defaultMessage: 'Loading organization...',
     description: 'Message displayed while loading an organization',
-    id: 'components.TeacherOrganizationDashboardSidebar.loading',
+    id: 'components.TeacherDashboardOrganizationSidebar.loading',
   },
 });
 
-export const TeacherOrganizationDashboardSidebar = () => {
+export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRoutePath = getDashboardRoutePath(intl);
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId } = useParams<{ organizationId: string }>();
+  const { organizationId, courseProductRelationId } = useParams<{
+    organizationId: string;
+    courseProductRelationId?: string;
+  }>();
   const {
     item: organization,
     states: { fetching },
   } = useOrganization(organizationId);
 
-  const links = useMemo(
-    () =>
-      [TeacherDashboardPaths.ORGANIZATION_COURSES].map((path) => ({
-        to: generatePath(
-          getRoutePath(path, {
-            organizationId: ':organizationId',
-          }),
-          { organizationId },
-        ),
-        label: getRouteLabel(path),
-      })),
-    [],
-  );
+  const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
+    const path = getRoutePath(basePath, { organizationId });
+
+    const menuLink: MenuLink = {
+      to: path,
+      label: getRouteLabel(basePath),
+    };
+
+    if (basePath === TeacherDashboardPaths.ORGANIZATION_CONTRACTS) {
+      menuLink.component = (
+        <ContractNavLink
+          link={menuLink}
+          organizationId={organizationId}
+          courseProductRelationId={courseProductRelationId}
+        />
+      );
+    }
+
+    return menuLink;
+  };
+
+  const links = [
+    TeacherDashboardPaths.ORGANIZATION_COURSES,
+    TeacherDashboardPaths.ORGANIZATION_CONTRACTS,
+  ].map(getMenuLinkFromPath);
 
   if (fetching) {
     return (
@@ -66,12 +78,11 @@ export const TeacherOrganizationDashboardSidebar = () => {
       menuLinks={links}
       header={organization.title}
       subHeader={intl.formatMessage(messages.subHeader)}
-      avatarPosition={DashboardAvatarPositionEnum.THREE_QUARTER}
       avatar={
         <DashboardAvatar
           title={organization.title}
           variant={DashboardAvatarVariantEnum.SQUARE}
-          imageUrl={organization.logo.src}
+          image={organization.logo}
         />
       }
     />

package/js/widgets/Dashboard/components/{TeacherProfileDashboardSidebar → TeacherDashboardProfileSidebar}/components/OrganizationLinks/_styles.scss

@@ -1,11 +1,11 @@
 .dashboard-sidebar {
   &__organization-section {
-    $padding-left: r-theme-val(dashboard-sidebar, menu-link-left-padding);
-    padding: rem-calc(20px) rem-calc(8px) 0 rem-calc($padding-left);
+    $padding-inline: r-theme-val(dashboard-sidebar, menu-link-inline-padding);
+    padding: rem-calc(16px) rem-calc($padding-inline) 0 rem-calc($padding-inline);
 
     &__title {
-      font-size: rem-calc(16px);
-      font-weight: normal;
+      font-size: 1rem;
+      font-weight: bold;
       color: r-theme-val(dashboard-sidebar-organization-link-title, base-color);
     }
 
@@ -18,24 +18,41 @@
     }
 
     &__link {
-      flex: 0 0 32%;
-      display: flex;
-      border: thin solid r-theme-val(organization-thumb, border-color);
+      align-items: center;
       border-radius: rem-calc(8px);
+      border: thin solid r-theme-val(organization-thumb, border-color);
+      display: flex;
+      flex: 0 0 32%;
       overflow: hidden;
       justify-content: center;
-      align-items: center;
       padding: rem-calc(2px);
+      aspect-ratio: 1 / 1;
+
       &:hover,
       &:focus,
       &:active {
         border-color: r-theme-val(organization-thumb, border-color-hover);
         box-shadow: 0 0 rem-calc(3px) r-theme-val(organization-thumb, border-color);
+        text-decoration: none;
       }
+
       &__img {
-        object-fit: cover;
+        object-fit: contain;
         object-position: center center;
-        aspect-ratio: 2/1;
+        aspect-ratio: 1/1;
+        border-radius: rem-calc(6px);
+      }
+
+      &__abbr {
+        font-size: 1.5rem;
+        font-family: $r-font-family-montserrat;
+        font-weight: $font-weight-boldest;
+        text-transform: uppercase;
+        display: inline-block;
+      }
+
+      @include media-breakpoint-down(lg) {
+        max-width: rem-calc(64px);
       }
     }
   }

package/js/widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks/index.spec.tsx

@@ -0,0 +1,49 @@
+import { screen } from '@testing-library/react';
+import { OrganizationFactory } from 'utils/test/factories/joanie';
+import { render } from 'utils/test/render';
+import { PresentationalAppWrapper } from 'utils/test/wrappers/PresentationalAppWrapper';
+import OrganizationLinks from '.';
+
+describe('OrganizationLinks', () => {
+  it('should render successfully organization with logo', () => {
+    const organization = OrganizationFactory({ title: 'Organization 1' }).one();
+
+    render(<OrganizationLinks organizations={[organization]} />, {
+      wrapper: PresentationalAppWrapper,
+    });
+
+    // A link to the organization should be rendered
+    const link = screen.getByRole('link', { name: 'Organization 1' });
+    expect(link).toHaveAttribute('href', `/teacher/organizations/${organization.id}/courses`);
+
+    // The link should contain the organization logo
+    const img = link.querySelector('img');
+    expect(img).toHaveAttribute('alt', organization.title);
+    expect(img).toHaveAttribute('src', organization.logo?.src);
+    expect(img).toHaveAttribute('srcset', organization.logo?.srcset);
+
+    // And not the abbreviation
+    const abbr = link.querySelector('span');
+    expect(abbr).toBeNull();
+  });
+
+  it('should render successfully organization with abbr', () => {
+    const organization = OrganizationFactory({ title: 'Organization 1', logo: null }).one();
+
+    render(<OrganizationLinks organizations={[organization]} />, {
+      wrapper: PresentationalAppWrapper,
+    });
+
+    // A link to the organization should be rendered
+    const link = screen.getByRole('link', { name: 'Organization 1' });
+    expect(link).toHaveAttribute('href', `/teacher/organizations/${organization.id}/courses`);
+
+    // The link should contain the organization abbreviation
+    const abbr = link.querySelector('span');
+    expect(abbr).toHaveTextContent('O1');
+
+    // And not the logo
+    const img = link.querySelector('img');
+    expect(img).toBeNull();
+  });
+});

package/js/widgets/Dashboard/components/{TeacherProfileDashboardSidebar → TeacherDashboardProfileSidebar}/components/OrganizationLinks/index.tsx

@@ -3,15 +3,16 @@ import { Link } from 'react-router-dom';
 import { Organization } from 'types/Joanie';
 import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
+import { StringHelper } from 'utils/StringHelper';
 
 export const messages = defineMessages({
   organizationsTitle: {
-    id: 'components.TeacherProfileDashboardSidebar.OrganizationLinks.organizationsTitle',
+    id: 'components.TeacherDashboardProfileSidebar.OrganizationLinks.organizationsTitle',
     description: 'Title of the organizations section',
     defaultMessage: 'My universities',
   },
   organizationLinkTitle: {
-    id: 'components.TeacherProfileDashboardSidebar.OrganizationLinks.organizationLinkTitle',
+    id: 'components.TeacherDashboardProfileSidebar.OrganizationLinks.organizationLinkTitle',
     description: 'Organization link title',
     defaultMessage: 'Link to organization "{organizationTitle}"',
   },
@@ -40,11 +41,21 @@ const OrganizationLinks = ({ organizations }: OrganizationLinksProps) => {
               organizationTitle: organization.title,
             })}
           >
-            <img
-              className="dashboard-sidebar__organization-section__link__img"
-              alt={organization.title}
-              src={organization.logo.src}
-            />
+            {organization.logo ? (
+              <img
+                className="dashboard-sidebar__organization-section__link__img"
+                alt={organization.title}
+                src={organization.logo.src}
+                srcSet={organization.logo.srcset}
+              />
+            ) : (
+              <span
+                className="dashboard-sidebar__organization-section__link__abbr"
+                aria-label={organization.title}
+              >
+                {StringHelper.abbreviate(organization.title, 3)}
+              </span>
+            )}
           </Link>
         ))}
       </div>

package/js/widgets/Dashboard/components/{TeacherProfileDashboardSidebar → TeacherDashboardProfileSidebar}/index.spec.tsx

@@ -1,22 +1,16 @@
 import fetchMock from 'fetch-mock';
-import { MemoryRouter } from 'react-router-dom';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider, createIntl } from 'react-intl';
-import { QueryClientProvider } from '@tanstack/react-query';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  UserFactory,
-} from 'utils/test/factories/richie';
+import { screen } from '@testing-library/react';
+import { createIntl } from 'react-intl';
+import { RichieContextFactory as mockRichieContextFactory } 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 { OrganizationFactory } from 'utils/test/factories/joanie';
-import { messages as organizationLinksMessages } from 'widgets/Dashboard/components/TeacherProfileDashboardSidebar/components/OrganizationLinks';
-
-import { TeacherProfileDashboardSidebar } from '.';
+import { messages as organizationLinksMessages } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar/components/OrganizationLinks';
+import { render } from 'utils/test/render';
+import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { TeacherDashboardProfileSidebar } from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -34,38 +28,18 @@ jest.mock('utils/indirection/window', () => ({
 
 const intl = createIntl({ locale: 'en' });
 
-const renderTeacherProfileDashboardSidebar = () =>
-  render(
-    <IntlProvider locale="en">
-      <QueryClientProvider client={createTestQueryClient({ user: UserFactory().one() })}>
-        <JoanieSessionProvider>
-          <MemoryRouter>
-            <TeacherProfileDashboardSidebar />
-          </MemoryRouter>
-        </JoanieSessionProvider>
-      </QueryClientProvider>
-    </IntlProvider>,
-  );
+describe('<TeacherDashboardProfileSidebar/>', () => {
+  const joanieSessionData = setupJoanieSession();
 
-describe('<TeacherProfileDashboardSidebar/>', () => {
   let nbApiRequest: number;
   beforeEach(() => {
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', []);
-
-    // 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();
+    nbApiRequest = joanieSessionData.nbSessionApiRequest;
   });
 
   it('should display menu items', async () => {
     nbApiRequest += 1; // call to organizations
-    renderTeacherProfileDashboardSidebar();
+    render(<TeacherDashboardProfileSidebar />);
 
     expect(
       screen.getByRole('link', {
@@ -80,13 +54,13 @@ describe('<TeacherProfileDashboardSidebar/>', () => {
     expect(fetchMock.calls()).toHaveLength(nbApiRequest);
   });
 
-  it('should display menu items', async () => {
+  it('should display organization links', async () => {
     const organizations = OrganizationFactory().many(3);
     fetchMock.get('https://joanie.endpoint/api/v1.0/organizations/', organizations, {
       overwriteRoutes: true,
     });
     nbApiRequest += 1; // call to organizations
-    renderTeacherProfileDashboardSidebar();
+    render(<TeacherDashboardProfileSidebar />);
     expect(await screen.findByTestId('organization-links')).toBeInTheDocument();
     expect(fetchMock.calls()).toHaveLength(nbApiRequest);
 

package/js/widgets/Dashboard/components/{TeacherProfileDashboardSidebar → TeacherDashboardProfileSidebar}/index.stories.tsx

@@ -1,24 +1,24 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { UserFactory } from 'utils/test/factories/richie';
-import { TeacherProfileDashboardSidebar } from 'widgets/Dashboard/components/TeacherProfileDashboardSidebar';
+import { TeacherDashboardProfileSidebar } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar';
 import { StorybookHelper } from 'utils/StorybookHelper';
 
 export default {
-  component: TeacherProfileDashboardSidebar,
+  component: TeacherDashboardProfileSidebar,
   render: () => {
     const user = UserFactory().one();
     const router = createMemoryRouter([
       {
         index: true,
-        element: <TeacherProfileDashboardSidebar />,
+        element: <TeacherDashboardProfileSidebar />,
       },
     ]);
 
     return StorybookHelper.wrapInApp(<RouterProvider router={router} />, { user });
   },
-} as Meta<typeof TeacherProfileDashboardSidebar>;
+} as Meta<typeof TeacherDashboardProfileSidebar>;
 
-type Story = StoryObj<typeof TeacherProfileDashboardSidebar>;
+type Story = StoryObj<typeof TeacherDashboardProfileSidebar>;
 
 export const TeacherProfile: Story = {};

package/js/widgets/Dashboard/components/{TeacherProfileDashboardSidebar → TeacherDashboardProfileSidebar}/index.tsx

@@ -8,17 +8,18 @@ import {
 } from 'widgets/Dashboard/utils/dashboardRoutes';
 import { useSession } from 'contexts/SessionContext';
 import { useOrganizations } from 'hooks/useOrganizations';
+import { UserHelper } from 'utils/UserHelper';
 import OrganizationLinks from './components/OrganizationLinks';
 
 const messages = defineMessages({
   subHeader: {
-    id: 'components.TeacherProfileDashboardSidebar.subHeader',
+    id: 'components.TeacherDashboardProfileSidebar.subHeader',
     description: 'Sub title of the dashboard sidebar',
     defaultMessage: 'You are on your teacher dashboard',
   },
 });
 
-export const TeacherProfileDashboardSidebar = () => {
+export const TeacherDashboardProfileSidebar = () => {
   const intl = useIntl();
   const { user } = useSession();
   const getRoutePath = getDashboardRoutePath(intl);
@@ -37,7 +38,7 @@ export const TeacherProfileDashboardSidebar = () => {
   return (
     <DashboardSidebar
       menuLinks={links}
-      header={user?.username || ''}
+      header={user ? UserHelper.getName(user) : ''}
       subHeader={intl.formatMessage(messages.subHeader)}
     >
       {organizations.length > 0 && <OrganizationLinks organizations={organizations} />}

package/js/widgets/Dashboard/hooks/useEnroll/index.ts

@@ -1,12 +1,12 @@
-import { useIntl } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 import { useState } from 'react';
 import { Priority } from 'types';
 import { confirm } from 'utils/indirection/window';
 import { resolveAll } from 'utils/resolveAll';
-import { CourseRun, Enrollment, Order } from 'types/Joanie';
+import { CourseRun, Enrollment, CredentialOrder } from 'types/Joanie';
 import { useEnrollments } from 'hooks/useEnrollments';
 
-const messages = {
+const messages = defineMessages({
   firstEnrollCourseConfirmation: {
     id: 'components.DashboardItemEnrollment.firstEnrollCourseConfirmation',
     description:
@@ -20,9 +20,9 @@ const messages = {
     defaultMessage:
       'Are you sure you want to change your session? You will be unrolled from the other session!',
   },
-};
+});
 
-export const useEnroll = (enrollments: Enrollment[], order?: Order) => {
+export const useEnroll = (enrollments: Enrollment[], order?: CredentialOrder) => {
   const enrollmentResources = useEnrollments();
   const [isLoading, setLoading] = useState(false);
   const intl = useIntl();
@@ -48,7 +48,7 @@ export const useEnroll = (enrollments: Enrollment[], order?: Order) => {
       await new Promise((resolve) => {
         enrollmentResources.methods.update(
           {
-            course_run: enrollment.course_run.id,
+            course_run_id: enrollment.course_run.id,
             is_active: false,
             id: enrollment!.id,
             was_created_by_order: enrollment.was_created_by_order,
@@ -72,7 +72,7 @@ export const useEnroll = (enrollments: Enrollment[], order?: Order) => {
         {
           id: relatedEnrollment.id,
           is_active: true,
-          course_run: courseRun.id,
+          course_run_id: courseRun.id,
           was_created_by_order: !!order,
         },
         { onSettled },
@@ -81,7 +81,7 @@ export const useEnroll = (enrollments: Enrollment[], order?: Order) => {
       await enrollmentResources.methods.create(
         {
           is_active: true,
-          course_run: courseRun.id,
+          course_run_id: courseRun.id,
           was_created_by_order: !!order,
         },
         { onSettled },

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

@@ -61,10 +61,13 @@ describe('<Dashboard />', () => {
       'https://joanie.endpoint/api/v1.0/enrollments/?page=1&page_size=50&was_created_by_order=false',
       { count: 0, results: [] },
     );
-    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=50', {
-      count: 0,
-      results: [],
-    });
+    fetchMock.get(
+      'https://joanie.endpoint/api/v1.0/orders/?page=1&page_size=50&product__type=credential',
+      {
+        count: 0,
+        results: [],
+      },
+    );
   });
 
   afterEach(() => {
@@ -92,7 +95,7 @@ describe('<Dashboard />', () => {
     const user = UserFactory().one();
 
     render(<DashboardWithUser user={user} />);
-    expectBreadcrumbsToEqualParts(['Back', 'My courses']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My courses']);
   });
 
   it('changes route when using the sidebar', async () => {
@@ -117,7 +120,7 @@ describe('<Dashboard />', () => {
     });
     render(<DashboardWithUser user={user} />);
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.COURSES);
-    expectBreadcrumbsToEqualParts(['Back', 'My courses']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My courses']);
 
     // Go to "My Preferences" route.
     const link = screen.getByRole('link', { name: 'My preferences' });
@@ -125,7 +128,7 @@ describe('<Dashboard />', () => {
       fireEvent.click(link);
     });
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.PREFERENCES);
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences']);
 
     // Go to the address edit route.
     const button = await screen.findByRole('button', { name: 'Edit' });
@@ -136,18 +139,18 @@ describe('<Dashboard />', () => {
       LearnerDashboardPaths.PREFERENCES_ADDRESS_EDITION.replace(':addressId', address.id),
     );
     expectBreadcrumbsToEqualParts([
-      'Back',
+      'chevron_leftBack',
       'My preferences',
       'Edit address "' + address.title + '"',
     ]);
 
     // Click on back button goes back to "My Preferences".
-    const backButton = await screen.findByRole('link', { name: 'Back' });
+    const backButton = await screen.findByRole('link', { name: /Back/ });
     await act(async () => {
       fireEvent.click(backButton);
     });
     expectUrlMatchLocationDisplayed(LearnerDashboardPaths.PREFERENCES);
-    expectBreadcrumbsToEqualParts(['Back', 'My preferences']);
+    expectBreadcrumbsToEqualParts(['chevron_leftBack', 'My preferences']);
 
     // Click again on back button to get redirect to website's root.
     expect(location.replace).not.toHaveBeenCalled();
@@ -157,10 +160,17 @@ describe('<Dashboard />', () => {
     expect(location.replace).toHaveBeenCalledWith('https://localhost');
   });
 
-  it('should render username in sidebar', () => {
-    const user: User = UserFactory().one();
+  it('should render username in sidebar if full_name is not defined', () => {
+    const user: User = UserFactory({ full_name: undefined }).one();
     render(<DashboardWithUser user={user} />);
     const sidebar = screen.getByTestId('dashboard__sidebar');
     getByText(sidebar, user.username, { exact: false });
   });
+
+  it('should render full_name in sidebar', () => {
+    const user: User = UserFactory().one();
+    render(<DashboardWithUser user={user} />);
+    const sidebar = screen.getByTestId('dashboard__sidebar');
+    getByText(sidebar, user.full_name!, { exact: false });
+  });
 });

package/js/widgets/Dashboard/utils/learnerRouteMessages.tsx

@@ -8,8 +8,9 @@ export enum LearnerDashboardPaths {
   ORDER = '/courses/orders/:orderId',
   ORDER_RUNS = '/courses/orders/:orderId/runs',
   COURSE = '/courses/:code',
-  PREFERENCES = '/preferences',
   CERTIFICATES = '/certificates',
+  CONTRACTS = '/training-contracts',
+  PREFERENCES = '/preferences',
   PREFERENCES_ADDRESS_EDITION = '/preferences/addresses/:addressId',
   PREFERENCES_ADDRESS_CREATION = '/preferences/addresses/create',
   PREFERENCES_CREDIT_CARD_EDITION = '/preferences/credit-cards/:creditCardId',
@@ -42,6 +43,11 @@ export const LEARNER_DASHBOARD_ROUTE_PATHS = defineMessages<LearnerDashboardPath
     description: 'The path to display the certificates view.',
     defaultMessage: '/certificates',
   },
+  [LearnerDashboardPaths.CONTRACTS]: {
+    id: 'components.Dashboard.DashboardRoutes.contracts.path',
+    description: 'The path to display the training contracts view.',
+    defaultMessage: '/training-contracts',
+  },
   [LearnerDashboardPaths.PREFERENCES]: {
     id: 'components.Dashboard.DashboardRoutes.preferences.path',
     description: 'The path to display the preferences view.',
@@ -91,6 +97,11 @@ export const LEARNER_DASHBOARD_ROUTE_LABELS = defineMessages<LearnerDashboardPat
     description: 'Label of the certificates view used in navigation components.',
     defaultMessage: 'My certificates',
   },
+  [LearnerDashboardPaths.CONTRACTS]: {
+    id: 'components.Dashboard.DashboardRoutes.contracts.label',
+    description: 'Label of the training contracts view used in navigation components.',
+    defaultMessage: 'My training contracts',
+  },
   [LearnerDashboardPaths.PREFERENCES]: {
     id: 'components.Dashboard.DashboardRoutes.preferences.label',
     description: 'Label of the preferences view used in navigation components.',

package/js/widgets/Dashboard/utils/learnerRoutes.tsx

@@ -17,6 +17,7 @@ import {
 } from 'widgets/Dashboard/utils/learnerRouteMessages';
 import { DashboardCertificates } from 'pages/DashboardCertificates';
 import { DashboardOrderLayout } from 'pages/DashboardOrderLayout';
+import { DashboardContracts } from 'pages/DashboardContracts';
 
 export interface DashboardRouteHandle {
   crumbLabel?: MessageDescriptor;
@@ -62,6 +63,11 @@ export function getLearnerDashboardRoutes() {
       handle: { crumbLabel: LEARNER_DASHBOARD_ROUTE_LABELS[LearnerDashboardPaths.CERTIFICATES] },
       element: <DashboardCertificates />,
     },
+    {
+      path: getRoutePath(LearnerDashboardPaths.CONTRACTS),
+      handle: { crumbLabel: LEARNER_DASHBOARD_ROUTE_LABELS[LearnerDashboardPaths.CONTRACTS] },
+      element: <DashboardContracts />,
+    },
     {
       path: getRoutePath(LearnerDashboardPaths.COURSE, { code: ':code' }),
       element: <RouteInfo title={getRouteLabel(LearnerDashboardPaths.COURSE)} />,