richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/Dashboard/components/DashboardSidebar/_styles.scss

@@ -5,31 +5,37 @@
   border-radius: $border-radius;
   box-shadow: r-theme-val(dashboard-sidebar, base-shadow);
   color: r-theme-val(dashboard-sidebar, base-color);
-  padding-bottom: rem-calc(27px);
+  padding-bottom: r-theme-val(dashboard-sidebar, menu-link-inline-padding);
+  position: relative;
+  z-index: 2;
 
   @include media-breakpoint-down(lg) {
     width: auto;
   }
 
+  &__nav-select {
+    width: 100%;
+  }
+
   &__container {
     &__header {
-      padding: rem-calc(64px) rem-calc(16px) rem-calc(50px) rem-calc(16px);
+      $padding-inline: rem-calc(r-theme-val(dashboard-sidebar, menu-link-inline-padding));
+      padding: rem-calc(64px) $padding-inline rem-calc(32px) $padding-inline;
       position: relative;
       display: flex;
       flex-direction: column;
       align-items: center;
+      text-align: center;
 
       &__avatar {
         position: absolute;
         top: calc($avatar-size / -2);
-        &--three_quarter {
-          top: calc($avatar-size / 3 * -2);
-        }
+        // avatar's parent font-size define the avatar size.
+        font-size: rem-calc(40px);
       }
 
       h3 {
         font-weight: bold;
-        text-align: center;
         margin-bottom: rem-calc(12px);
       }
 
@@ -40,8 +46,8 @@
     }
 
     &__title {
-      $titlePadding: rem-calc(r-theme-val(dashboard-sidebar, menu-link-left-padding) + 3px);
-      padding: 0 $titlePadding 1rem $titlePadding;
+      $padding-inline: rem-calc(r-theme-val(dashboard-sidebar, menu-link-inline-padding) + 3px);
+      padding: 0 $padding-inline 1rem $padding-inline;
       margin: 0;
     }
 
@@ -54,7 +60,7 @@
       }
     }
 
-    ul {
+    &__nav {
       list-style: none;
       padding: 0;
       margin: 0;
@@ -64,42 +70,49 @@
         display: none;
       }
 
-      li {
-        height: rem-calc(16px);
-        overflow: hidden;
+      &__item {
         display: flex;
         align-items: center;
         font-size: rem-calc(16px);
-        margin-top: rem-calc(8px);
         line-height: 1em;
+        margin-top: rem-calc(8px);
+        gap: rem-calc(8px);
+        position: relative;
+
         &:first-child {
           padding-top: 0;
         }
 
+        a {
+          display: flex;
+          align-items: center;
+          line-height: 1;
+          padding-left: r-theme-val(dashboard-sidebar, menu-link-inline-padding);
+          color: r-theme-val(dashboard-sidebar, base-color);
+
+          &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            inset: 0;
+          }
+        }
+
         &:hover {
           border-left: 3px solid r-theme-val(dashboard-sidebar, base-color);
           a {
-            padding-left: rem-calc(r-theme-val(dashboard-sidebar, menu-link-left-padding) - 3px);
+            padding-left: rem-calc(r-theme-val(dashboard-sidebar, menu-link-inline-padding) - 3px);
           }
         }
 
         &.active {
           border-left: 3px solid r-theme-val(dashboard-sidebar, active-color);
           a {
-            padding-left: rem-calc(r-theme-val(dashboard-sidebar, menu-link-left-padding) - 3px);
+            padding-left: rem-calc(r-theme-val(dashboard-sidebar, menu-link-inline-padding) - 3px);
             font-weight: 600;
             color: r-theme-val(dashboard-sidebar, active-color);
           }
         }
-
-        a {
-          display: flex;
-          flex: 1;
-          align-items: center;
-          height: rem-calc(24px);
-          padding-left: r-theme-val(dashboard-sidebar, menu-link-left-padding);
-          color: r-theme-val(dashboard-sidebar, base-color);
-        }
       }
     }
   }

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.spec.tsx

@@ -0,0 +1,244 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { IntlProvider } from 'react-intl';
+import fetchMock from 'fetch-mock';
+import { faker } from '@faker-js/faker';
+import queryString from 'query-string';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { PER_PAGE } from 'settings';
+import { ContractResourceQuery, ContractState } from 'types/Joanie';
+import { ContractFactory } from 'utils/test/factories/joanie';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import { MenuLink } from '../..';
+import ContractNavLink from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+describe('<ContractNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => (
+    <QueryClientProvider client={createTestQueryClient({ user: true })}>
+      <IntlProvider locale="en">
+        <JoanieSessionProvider>
+          <MemoryRouter>{children}</MemoryRouter>
+        </JoanieSessionProvider>
+      </IntlProvider>
+    </QueryClientProvider>
+  );
+
+  beforeEach(() => {
+    // JoanieSessionProvider queries
+    fetchMock.get('https://joanie.endpoint/api/v1.0/addresses/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/orders/', []);
+    fetchMock.get('https://joanie.endpoint/api/v1.0/credit-cards/', []);
+  });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should render a ContractNavLink with route and label when neither organizationId and courseProductRelationId are given', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My contract navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <ContractNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My contract navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  describe('without sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: false };
+    it.each([
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+      },
+    ])(
+      'should never render Badge for organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({ organizationId, courseProductRelationId }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: 1,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+      },
+    );
+  });
+
+  describe('with sign ability', () => {
+    const contractAbilities = { [ContractActions.SIGN]: true };
+    it.each([
+      // with 1 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: 1,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 1,
+        expectedBadgeCount: undefined,
+      },
+
+      // with 0 contracts to sign
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: faker.string.uuid(),
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: faker.string.uuid(),
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+      {
+        organizationId: undefined,
+        courseProductRelationId: undefined,
+        nbContractsToSign: 0,
+        expectedBadgeCount: undefined,
+      },
+    ])(
+      'should render Badge (count: $expectedBadgeCount) for nb contracts to sign: $nbContractsToSign, organizationId: $organizationId and courseProductId: $courseProductRelationId',
+      async ({
+        nbContractsToSign,
+        organizationId,
+        courseProductRelationId,
+        expectedBadgeCount,
+      }) => {
+        let contractQueryParams: ContractResourceQuery = {
+          signature_state: ContractState.LEARNER_SIGNED,
+          page: 1,
+          page_size: PER_PAGE.teacherContractList,
+        };
+        if (courseProductRelationId) {
+          contractQueryParams = {
+            course_product_relation_id: courseProductRelationId,
+            ...contractQueryParams,
+          };
+        }
+
+        fetchMock.get(
+          `https://joanie.endpoint/api/v1.0/organizations/${organizationId}/contracts/?${queryString.stringify(
+            contractQueryParams,
+            { sort: false },
+          )}`,
+          {
+            count: nbContractsToSign,
+            next: null,
+            previous: null,
+            results: [ContractFactory({ abilities: contractAbilities }).one()],
+          },
+        );
+        render(
+          <Wrapper>
+            <ContractNavLink
+              link={{
+                to: '/dummy/url/',
+                label: 'My contract navigation link',
+              }}
+              organizationId={organizationId}
+              courseProductRelationId={courseProductRelationId}
+            />
+          </Wrapper>,
+        );
+
+        expect(
+          screen.getByRole('link', { name: 'My contract navigation link' }),
+        ).toBeInTheDocument();
+        if (expectedBadgeCount === undefined) {
+          expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+        } else {
+          const $badge = await screen.findByTestId('badge');
+          expect($badge).toBeInTheDocument();
+          expect($badge).toHaveTextContent(`${expectedBadgeCount}`);
+        }
+      },
+    );
+  });
+});

package/js/widgets/Dashboard/components/DashboardSidebar/components/ContractNavLink/index.tsx

@@ -0,0 +1,49 @@
+import { createSearchParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
+import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
+import { ContractActions } from 'utils/AbilitiesHelper/types';
+import useContractAbilities from 'hooks/useContractAbilities';
+import useDefaultOrganizationId from 'pages/TeacherDashboardContractsLayout/hooks/useDefaultOrganizationId';
+import MenuNavLink from '../MenuNavLink';
+
+interface ContractNavLinkProps {
+  link: MenuLink;
+  organizationId?: Organization['id'];
+  courseProductRelationId?: CourseProductRelation['id'];
+}
+
+const ContractNavLink = ({
+  link,
+  organizationId,
+  courseProductRelationId,
+}: ContractNavLinkProps) => {
+  const defaultOrganizationId = useDefaultOrganizationId();
+  const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
+    organizationId: organizationId || defaultOrganizationId,
+    courseProductRelationId,
+  });
+  const contractAbilities = useContractAbilities(pendingContracts);
+  const canSignContracts = contractAbilities.can(ContractActions.SIGN);
+  const hasContractsToSign = useMemo(
+    () => canSignContracts && pendingContractCount > 0,
+    [canSignContracts, pendingContractCount],
+  );
+  const searchParams = useMemo(() => {
+    if (hasContractsToSign) {
+      return createSearchParams({ signature_state: ContractState.LEARNER_SIGNED });
+    }
+
+    return createSearchParams({ signature_state: ContractState.SIGNED });
+  }, [hasContractsToSign]);
+
+  return (
+    <MenuNavLink
+      link={{ ...link, to: `${link.to}?${searchParams.toString()}` }}
+      badgeCount={hasContractsToSign ? pendingContractCount : undefined}
+    />
+  );
+};
+
+export default ContractNavLink;

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.spec.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import { PropsWithChildren } from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { MenuLink } from '../..';
+import MenuNavLink from '.';
+
+describe('<MenuNavLink />', () => {
+  const Wrapper = ({ children }: PropsWithChildren) => <MemoryRouter>{children} </MemoryRouter>;
+  it('should render a MenuNavLink with route and label', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.queryByTestId('badge')).not.toBeInTheDocument();
+  });
+
+  it('should render a MenuNavLink with a badge', () => {
+    const link: MenuLink = {
+      to: '/dummy/url/',
+      label: 'My navigation link',
+    };
+
+    render(
+      <Wrapper>
+        <MenuNavLink link={link} badgeCount={999} />
+      </Wrapper>,
+    );
+
+    expect(screen.getByRole('link', { name: 'My navigation link' })).toBeInTheDocument();
+    expect(screen.getByText('999')).toBeInTheDocument();
+  });
+});

package/js/widgets/Dashboard/components/DashboardSidebar/components/MenuNavLink/index.tsx

@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import { NavLink, useLocation } from 'react-router-dom';
+import Badge from 'components/Badge';
+import { MenuLink } from '../..';
+import { isMenuLinkActive } from '../../utils';
+
+interface MenuNavLinkProps {
+  link: MenuLink;
+  badgeCount?: number;
+}
+
+const MenuNavLink = ({ link, badgeCount }: MenuNavLinkProps) => {
+  const location = useLocation();
+  return (
+    <li
+      className={classNames('dashboard-sidebar__container__nav__item', {
+        active: isMenuLinkActive(link.to, location),
+      })}
+    >
+      <NavLink to={link.to} end>
+        {link.label}
+      </NavLink>
+      {badgeCount && <Badge color="primary">{badgeCount}</Badge>}
+    </li>
+  );
+};
+
+export default MenuNavLink;

package/js/widgets/Dashboard/components/DashboardSidebar/components/NavigationSelect.tsx

@@ -0,0 +1,58 @@
+import { Select, SelectHandle } from '@openfun/cunningham-react';
+import { useMemo, useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { matchPath, useLocation, useNavigate } from 'react-router-dom';
+import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
+
+const messages = defineMessages({
+  settingsLinkLabel: {
+    id: 'components.NavigationSelect.settingsLinkLabel',
+    description: 'label of the settings link',
+    defaultMessage: 'Settings',
+  },
+  responsiveNavLabel: {
+    id: 'components.NavigationSelect.responsiveNavLabel',
+    description: 'a11y related label for select input used to navigate on responsive',
+    defaultMessage: 'Navigate to',
+  },
+});
+
+type CunninghamSelectOnChange = (event: {
+  target: { value: string | number | undefined | string[] };
+}) => void;
+
+interface NavigationSelectProps {
+  menuLinks: MenuLink[];
+}
+
+const NavigationSelect = ({ menuLinks }: NavigationSelectProps) => {
+  const navigate = useNavigate();
+  const intl = useIntl();
+  const location = useLocation();
+  const selectNav = useRef<SelectHandle>(null);
+  const selectedLink = useMemo(
+    () => menuLinks.find((link) => matchPath({ path: link.to, end: true }, location.pathname))?.to,
+    [location, menuLinks],
+  );
+
+  const onSelectChange: CunninghamSelectOnChange = (event) => {
+    navigate(event.target.value as string);
+    selectNav.current?.blur();
+  };
+
+  return (
+    <Select
+      label={intl.formatMessage(messages.responsiveNavLabel)}
+      ref={selectNav}
+      hideLabel={true}
+      clearable={false}
+      name="dashboard-responsive-nav"
+      value={selectedLink}
+      onChange={onSelectChange}
+      className="dashboard-sidebar__nav-select"
+      options={menuLinks.map((link) => ({ label: link.label, value: link.to }))}
+    />
+  );
+};
+
+export default NavigationSelect;

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

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { createMemoryRouter, RouterProvider } from 'react-router-dom';
 import { UserFactory } from 'utils/test/factories/richie';
 import { StorybookHelper } from 'utils/StorybookHelper';
+import MenuNavLink from './components/MenuNavLink';
 import { DashboardSidebar } from '.';
 
 export default {
@@ -15,7 +16,16 @@ export default {
           <DashboardSidebar
             menuLinks={[
               { to: '/test', label: 'Menu link' },
-              { to: '/test/again', label: 'An other menu link' },
+              {
+                to: '/test/again',
+                label: 'An other menu link',
+                component: (
+                  <MenuNavLink
+                    link={{ to: '/test/again', label: 'An other menu link' }}
+                    badgeCount={999}
+                  />
+                ),
+              },
             ]}
             header="Dashboard story header"
             subHeader="Dashboard story subHeader"