richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/pages/{TeacherCourseDashboardLoader → TeacherDashboardCourseLoader}/index.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 
 import { capitalize } from 'lodash-es';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
-import { TeacherCourseDashboardSidebar } from 'widgets/Dashboard/components/TeacherCourseDashboardSidebar';
+import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';
 import { useCourse } from 'hooks/useCourses';
 import { Spinner } from 'components/Spinner';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
@@ -17,31 +17,32 @@ const messages = defineMessages({
   pageTitle: {
     defaultMessage: 'Course area',
     description: 'Use for the page title of the course area',
-    id: 'components.TeacherCourseDashboardLoader.pageTitle',
+    id: 'components.TeacherDashboardCourseLoader.pageTitle',
   },
   errorNoCourse: {
     defaultMessage: "This course doesn't exist",
     description: 'Message displayed when requested course is not found',
-    id: 'components.TeacherCourseDashboardLoader.errorNoCourse',
+    id: 'components.TeacherDashboardCourseLoader.errorNoCourse',
   },
   loading: {
     defaultMessage: 'Loading course...',
     description: 'Message displayed while loading a course',
-    id: 'components.TeacherCourseDashboardLoader.loading',
+    id: 'components.TeacherDashboardCourseLoader.loading',
   },
 });
 
-export const TeacherCourseDashboardLoader = () => {
+export const TeacherDashboardCourseLoader = () => {
   const intl = useIntl();
-  const { courseId } = useParams<{
+  const { courseId, organizationId } = useParams<{
     courseId?: string;
+    organizationId?: string;
     courseCodeAndProductId?: string;
   }>();
 
   const {
     item: course,
     states: { fetching: fetchingCourse },
-  } = useCourse(courseId);
+  } = useCourse(courseId, { organization_id: organizationId });
   const {
     items: courseRuns,
     states: { fetching: fetchingCourseRuns },
@@ -52,7 +53,7 @@ export const TeacherCourseDashboardLoader = () => {
   });
 
   return (
-    <DashboardLayout sidebar={<TeacherCourseDashboardSidebar />}>
+    <DashboardLayout sidebar={<TeacherDashboardCourseSidebar />}>
       <div className="dashboard__page_title_container">
         <h1 className="dashboard__page_title">
           <FormattedMessage {...messages.pageTitle} />

package/js/pages/{TeacherCoursesDashboardLoader → TeacherDashboardCoursesLoader}/index.spec.tsx

@@ -4,6 +4,7 @@ import { render, screen } from '@testing-library/react';
 import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 
+import { CunninghamProvider } from '@openfun/cunningham-react';
 import {
   RichieContextFactory as mockRichieContextFactory,
   UserFactory,
@@ -14,7 +15,7 @@ import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { mockPaginatedResponse } from 'utils/test/mockPaginatedResponse';
 import { PER_PAGE } from 'settings';
-import { TeacherCoursesDashboardLoader } from '.';
+import { TeacherDashboardCoursesLoader } from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -36,7 +37,7 @@ jest.mock('hooks/useIntersectionObserver', () => ({
   },
 }));
 
-describe('components/TeacherCoursesDashboardLoader', () => {
+describe('components/TeacherDashboardCoursesLoader', () => {
   const perPage = PER_PAGE.useCourseProductUnion;
   let nbApiCalls: number;
   beforeEach(() => {
@@ -52,11 +53,11 @@ describe('components/TeacherCoursesDashboardLoader', () => {
 
   it('should render', async () => {
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
       mockPaginatedResponse(CourseListItemFactory().many(15), 15, false),
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
       mockPaginatedResponse(CourseProductRelationFactory().many(15), 15, false),
     );
 
@@ -65,29 +66,28 @@ describe('components/TeacherCoursesDashboardLoader', () => {
       <IntlProvider locale="en">
         <QueryClientProvider client={createTestQueryClient({ user })}>
           <JoanieSessionProvider>
-            <RouterProvider
-              router={createMemoryRouter([
-                {
-                  path: '',
-                  element: <TeacherCoursesDashboardLoader />,
-                },
-              ])}
-            />
+            <CunninghamProvider>
+              <RouterProvider
+                router={createMemoryRouter([
+                  {
+                    path: '',
+                    element: <TeacherDashboardCoursesLoader />,
+                  },
+                ])}
+              />
+            </CunninghamProvider>
           </JoanieSessionProvider>
         </QueryClientProvider>
       </IntlProvider>,
     );
     await expectNoSpinner('Loading courses...');
 
-    nbApiCalls += 1; // courses api call
+    nbApiCalls += 1; // course api call
     nbApiCalls += 1; // course-product-relations api call
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
-    );
-    expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
 
     // section titles

package/js/pages/{TeacherCoursesDashboardLoader → TeacherDashboardCoursesLoader}/index.tsx

@@ -2,35 +2,35 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import TeacherDashboardCourseList from 'components/TeacherDashboardCourseList';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
-import { TeacherProfileDashboardSidebar } from 'widgets/Dashboard/components/TeacherProfileDashboardSidebar';
+import { TeacherDashboardProfileSidebar } from 'widgets/Dashboard/components/TeacherDashboardProfileSidebar';
 
 const messages = defineMessages({
   courses: {
     defaultMessage: 'Your courses',
     description: 'Filtered courses title',
-    id: 'components.TeacherCoursesDashboardLoader.title.filteredCourses',
+    id: 'components.TeacherDashboardCoursesLoader.title.filteredCourses',
   },
   incoming: {
     defaultMessage: 'Incoming',
     description: 'Incoming courses title',
-    id: 'components.TeacherCoursesDashboardLoader.title.incoming',
+    id: 'components.TeacherDashboardCoursesLoader.title.incoming',
   },
   ongoing: {
     defaultMessage: 'Ongoing',
     description: 'Ongoing courses title',
-    id: 'components.TeacherCoursesDashboardLoader.title.ongoing',
+    id: 'components.TeacherDashboardCoursesLoader.title.ongoing',
   },
   archived: {
     defaultMessage: 'Archived',
     description: 'Archived courses title',
-    id: 'components.TeacherCoursesDashboardLoader.title.archived',
+    id: 'components.TeacherDashboardCoursesLoader.title.archived',
   },
 });
 
-export const TeacherCoursesDashboardLoader = () => {
+export const TeacherDashboardCoursesLoader = () => {
   const intl = useIntl();
   return (
-    <DashboardLayout sidebar={<TeacherProfileDashboardSidebar />}>
+    <DashboardLayout sidebar={<TeacherDashboardProfileSidebar />}>
       <div className="teacher-courses-page">
         <TeacherDashboardCourseList titleTranslated={intl.formatMessage(messages.courses)} />
       </div>

package/js/pages/{TeacherOrganizationCourseDashboardLoader → TeacherDashboardOrganizationCourseLoader}/index.tsx

@@ -2,7 +2,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 import { Spinner } from 'components/Spinner';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
-import { TeacherOrganizationDashboardSidebar } from 'widgets/Dashboard/components/TeacherOrganizationDashboardSidebar';
+import { TeacherDashboardOrganizationSidebar } from 'widgets/Dashboard/components/TeacherDashboardOrganizationSidebar';
 import { useOrganization } from 'hooks/useOrganizations';
 import TeacherDashboardCourseList from 'components/TeacherDashboardCourseList';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';
@@ -11,16 +11,16 @@ const messages = defineMessages({
   title: {
     defaultMessage: 'Courses of {organizationTitle}',
     description: 'Message displayed as title of organization courses page',
-    id: 'components.TeacherOrganizationCourseDashboardLoader.title',
+    id: 'components.TeacherDashboardOrganizationCourseLoader.title',
   },
   loading: {
     defaultMessage: 'Loading organization ...',
     description: 'Message displayed while loading an organization',
-    id: 'components.TeacherOrganizationCourseDashboardLoader.loading',
+    id: 'components.TeacherDashboardOrganizationCourseLoader.loading',
   },
 });
 
-export const TeacherOrganizationCourseDashboardLoader = () => {
+export const TeacherDashboardOrganizationCourseLoader = () => {
   const intl = useIntl();
   const { organizationId } = useParams<{ organizationId: string }>();
   const {
@@ -31,7 +31,7 @@ export const TeacherOrganizationCourseDashboardLoader = () => {
     organizationTitle: organization?.title ?? '',
   });
   return (
-    <DashboardLayout sidebar={<TeacherOrganizationDashboardSidebar />}>
+    <DashboardLayout sidebar={<TeacherDashboardOrganizationSidebar />}>
       {fetching && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">

package/js/pages/{TeacherTrainingDashboard/TeacherTrainingDashboardLoader.tsx → TeacherDashboardTraining/TeacherDashboardTrainingLoader.tsx}

@@ -2,39 +2,40 @@ import { FormattedMessage, defineMessages } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
-import { TeacherCourseDashboardSidebar } from 'widgets/Dashboard/components/TeacherCourseDashboardSidebar';
+import { TeacherDashboardCourseSidebar } from 'widgets/Dashboard/components/TeacherDashboardCourseSidebar';
 import { Spinner } from 'components/Spinner';
 import { useCourseProductRelation } from 'hooks/useCourseProductRelation';
 import { useBreadcrumbsPlaceholders } from 'hooks/useBreadcrumbsPlaceholders';
-import { TeacherTrainingDashboard } from '.';
+import { TeacherDashboardTraining } from '.';
 
 const messages = defineMessages({
   pageTitle: {
     defaultMessage: 'Training area',
     description: 'Use for the page title of the training area',
-    id: 'components.TeacherTrainingDashboardLoader.pageTitle',
+    id: 'components.TeacherDashboardTrainingLoader.pageTitle',
   },
   loading: {
     defaultMessage: 'Loading training...',
     description: 'Message displayed while loading a course',
-    id: 'components.TeacherTrainingDashboardLoader.loading',
+    id: 'components.TeacherDashboardTrainingLoader.loading',
   },
 });
 
-export const TeacherTrainingDashboardLoader = () => {
-  const { courseProductRelationId } = useParams<{
+export const TeacherDashboardTrainingLoader = () => {
+  const { courseProductRelationId, organizationId } = useParams<{
     courseProductRelationId: string;
+    organizationId?: string;
   }>();
 
   const {
     item: courseProductRelation,
     states: { fetching },
-  } = useCourseProductRelation(courseProductRelationId);
+  } = useCourseProductRelation(courseProductRelationId, { organization_id: organizationId });
   useBreadcrumbsPlaceholders({
     courseTitle: courseProductRelation?.product.title ?? '',
   });
   return (
-    <DashboardLayout sidebar={<TeacherCourseDashboardSidebar />}>
+    <DashboardLayout sidebar={<TeacherDashboardCourseSidebar />}>
       <div className="dashboard__page_title_container">
         <h1 className="dashboard__page_title">
           <FormattedMessage {...messages.pageTitle} />
@@ -47,7 +48,7 @@ export const TeacherTrainingDashboardLoader = () => {
           </span>
         </Spinner>
       ) : (
-        <TeacherTrainingDashboard courseProductRelation={courseProductRelation} />
+        <TeacherDashboardTraining courseProductRelation={courseProductRelation} />
       )}
     </DashboardLayout>
   );

package/js/pages/{TeacherTrainingDashboard → TeacherDashboardTraining}/index.spec.tsx

@@ -11,11 +11,11 @@ import {
   UserFactory,
 } from 'utils/test/factories/richie';
 import JoanieSessionProvider from 'contexts/SessionContext/JoanieSessionProvider';
-import { CourseProductRelationFactory } from 'utils/test/factories/joanie';
+import { CourseProductRelationFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { DashboardBreadcrumbsProvider } from 'widgets/Dashboard/contexts/DashboardBreadcrumbsContext';
-import { TeacherTrainingDashboardLoader } from '.';
+import { TeacherDashboardTrainingLoader } from '.';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -31,7 +31,7 @@ jest.mock('hooks/useIntersectionObserver', () => ({
   },
 }));
 
-describe('components/TeacherTrainingDashboardLoader', () => {
+describe('components/TeacherDashboardTrainingLoader', () => {
   let nbApiCalls: number;
   beforeEach(() => {
     // Joanie providers calls
@@ -41,7 +41,11 @@ describe('components/TeacherTrainingDashboardLoader', () => {
     nbApiCalls = 3;
   });
 
-  it('should render TeacherTrainingDashboardLoader page', async () => {
+  afterEach(() => {
+    fetchMock.restore();
+  });
+
+  it('should render TeacherDashboardTrainingLoader page', async () => {
     const courseProductRelation = CourseProductRelationFactory().one();
     fetchMock.get(
       `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
@@ -60,7 +64,7 @@ describe('components/TeacherTrainingDashboardLoader', () => {
                     [
                       {
                         path: ':courseProductRelationId',
-                        element: <TeacherTrainingDashboardLoader />,
+                        element: <TeacherDashboardTrainingLoader />,
                       },
                     ],
                     {
@@ -101,6 +105,72 @@ describe('components/TeacherTrainingDashboardLoader', () => {
       (acc, course) => acc + course.course_runs.length,
       0,
     );
-    expect(screen.getAllByRole('link', { name: 'go to course area' })).toHaveLength(nbCourseRun);
+    expect(screen.getAllByRole('link', { name: 'Go to course area' })).toHaveLength(nbCourseRun);
+  });
+
+  it('should fetch course product relation with organization id if there is one in the path', async () => {
+    const organization = OrganizationFactory().one();
+    const courseProductRelation = CourseProductRelationFactory({
+      organizations: [organization],
+    }).one();
+    fetchMock.get(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+      courseProductRelation,
+    );
+
+    const user = UserFactory().one();
+    render(
+      <IntlProvider locale="en">
+        <QueryClientProvider client={createTestQueryClient({ user })}>
+          <JoanieSessionProvider>
+            <DashboardBreadcrumbsProvider>
+              <CunninghamProvider>
+                <RouterProvider
+                  router={createMemoryRouter(
+                    [
+                      {
+                        path: '/:organizationId/:courseProductRelationId',
+                        element: <TeacherDashboardTrainingLoader />,
+                      },
+                    ],
+                    {
+                      initialEntries: [`/${organization.id}/${courseProductRelation.id}`],
+                    },
+                  )}
+                />
+              </CunninghamProvider>
+            </DashboardBreadcrumbsProvider>
+          </JoanieSessionProvider>
+        </QueryClientProvider>
+      </IntlProvider>,
+    );
+    // page placeholder
+    await expectNoSpinner('Loading training...');
+    // sidebar placeholder
+    await expectNoSpinner('Loading course...');
+
+    nbApiCalls += 1; // course-product-relations api call
+    const calledUrls = fetchMock.calls().map((call) => call[0]);
+    expect(calledUrls).toHaveLength(nbApiCalls);
+    expect(calledUrls).toContain(
+      `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/course-product-relations/${courseProductRelation.id}/`,
+    );
+
+    // main titles
+    expect(
+      screen.getByRole('heading', {
+        name: 'Training area',
+      }),
+    ).toBeInTheDocument();
+
+    expect(
+      screen.getAllByRole('heading', { name: capitalize(courseProductRelation.product.title) }),
+    ).toHaveLength(2);
+
+    const nbCourseRun = courseProductRelation.product.target_courses.reduce(
+      (acc, course) => acc + course.course_runs.length,
+      0,
+    );
+    expect(screen.getAllByRole('link', { name: 'Go to course area' })).toHaveLength(nbCourseRun);
   });
 });

package/js/pages/{TeacherTrainingDashboard → TeacherDashboardTraining}/index.tsx

@@ -1,7 +1,7 @@
 import { defineMessages, useIntl } from 'react-intl';
 
 import { capitalize } from 'lodash-es';
-import CourseRunList from 'pages/TeacherCourseDashboardLoader/CourseRunList';
+import CourseRunList from 'pages/TeacherDashboardCourseLoader/CourseRunList';
 import { DashboardLayout } from 'widgets/Dashboard/components/DashboardLayout';
 import { DashboardCard } from 'widgets/Dashboard/components/DashboardCard';
 import { Icon, IconTypeEnum } from 'components/Icon';
@@ -12,17 +12,17 @@ const messages = defineMessages({
   errorNoCourseProductRelation: {
     defaultMessage: "This product doesn't exist",
     description: 'Message displayed when requested course product relation is not found',
-    id: 'components.TeacherTrainingDashboard.errorNoCourseProductRelation',
+    id: 'components.TeacherDashboardTraining.errorNoCourseProductRelation',
   },
 });
 
-interface TeacherTrainingDashboardProps {
+interface TeacherDashboardTrainingProps {
   courseProductRelation: CourseProductRelation;
 }
 
-export const TeacherTrainingDashboard = ({
+export const TeacherDashboardTraining = ({
   courseProductRelation,
-}: TeacherTrainingDashboardProps) => {
+}: TeacherDashboardTrainingProps) => {
   const intl = useIntl();
   return courseProductRelation ? (
     <div className="teacher-course-page">
@@ -74,4 +74,4 @@ export const TeacherTrainingDashboard = ({
   );
 };
 
-export { TeacherTrainingDashboardLoader } from './TeacherTrainingDashboardLoader';
+export { TeacherDashboardTrainingLoader } from './TeacherDashboardTrainingLoader';

package/js/settings.dev.dist.ts

@@ -0,0 +1,3 @@
+import { DevDemoUser } from 'api/lms/dummy';
+
+export const CURRENT_JOANIE_DEV_DEMO_USER: DevDemoUser = 'admin';

package/js/settings.ts

@@ -1,3 +1,5 @@
+import * as defaultDevSettings from './settings.dev.dist';
+
 export const API_LIST_DEFAULT_PARAMS = {
   limit: '21',
   offset: '0',
@@ -16,7 +18,7 @@ export const REACT_QUERY_SETTINGS = {
     throttleTime: 500,
   },
   // Cache is garbage collected after this delay
-  cacheTime: 24 * 60 * 60 * 1000, // 24h in ms
+  gcTime: 24 * 60 * 60 * 1000, // 24h in ms
   // Data are considered as stale after this delay
   staleTimes: {
     default: 0, // Stale immediately
@@ -35,13 +37,39 @@ export const PAYMENT_SETTINGS = {
   pollLimit: 30,
 };
 
+export const CONTRACT_SETTINGS = {
+  // Interval in ms to poll the related order when a signature has succeeded.
+  pollInterval: 1500,
+  // Number of retries
+  pollLimit: 45,
+  // Simulated sign request delay
+  dummySignatureSignTimeout: 2000,
+};
+
+export const CONTRACT_DOWNLOAD_SETTINGS = {
+  // Interval in ms to poll the related contract's archive.
+  pollInterval: 1000,
+  contractArchiveLocalStorageKey: 'RICHIE_CONTRACT_ARCHIVE',
+  contractArchiveLocalVaklidityDurationMs: 10 * 60 * 60 * 1000, // 10min
+};
+
 const DEFAULT_PER_PAGE = 50;
 export const PER_PAGE = {
+  teacherContractList: 25,
   useUnionResources: DEFAULT_PER_PAGE,
   useCourseProductUnion: DEFAULT_PER_PAGE,
   useOrdersEnrollments: DEFAULT_PER_PAGE,
 };
 
+let devSettings;
+try {
+  devSettings = require('settings.dev.ts');
+} catch {
+  devSettings = defaultDevSettings;
+}
+
 export const MOCK_SERVICE_WORKER_ENABLED = false;
 
 export const DEBUG_UNION_RESOURCES_HOOK = process.env.NODE_ENV !== 'production' && false;
+
+export const { CURRENT_JOANIE_DEV_DEMO_USER } = devSettings;