richie-education 3.1.3-dev11 → 3.1.3-dev15

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

@@ -1,7 +1,7 @@
 import { createSearchParams } from 'react-router';
 import { useMemo } from 'react';
 import { MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
-import { ContractState, CourseProductRelation, Organization } from 'types/Joanie';
+import { ContractState, Offer, Organization } from 'types/Joanie';
 import useTeacherPendingContractsCount from 'hooks/useTeacherPendingContractsCount';
 import { ContractActions } from 'utils/AbilitiesHelper/types';
 import useContractAbilities from 'hooks/useContractAbilities';
@@ -11,18 +11,14 @@ import MenuNavLink from '../MenuNavLink';
 interface ContractNavLinkProps {
   link: MenuLink;
   organizationId?: Organization['id'];
-  courseProductRelationId?: CourseProductRelation['id'];
+  offerId?: Offer['id'];
 }
 
-const ContractNavLink = ({
-  link,
-  organizationId,
-  courseProductRelationId,
-}: ContractNavLinkProps) => {
+const ContractNavLink = ({ link, organizationId, offerId }: ContractNavLinkProps) => {
   const defaultOrganizationId = useDefaultOrganizationId();
   const { contracts: pendingContracts, pendingContractCount } = useTeacherPendingContractsCount({
     organizationId: organizationId || defaultOrganizationId,
-    courseProductRelationId,
+    offerId,
   });
   const contractAbilities = useContractAbilities(pendingContracts);
   const canSignContracts = contractAbilities.can(ContractActions.SIGN);

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

@@ -4,11 +4,7 @@ import { createIntl } from 'react-intl';
 import { generatePath } from 'react-router';
 import { CourseListItem } from 'types/Joanie';
 import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
-import {
-  CourseFactory,
-  CourseProductRelationFactory,
-  OrganizationFactory,
-} from 'utils/test/factories/joanie';
+import { CourseFactory, OfferFactory, OrganizationFactory } from 'utils/test/factories/joanie';
 import { expectNoSpinner } from 'utils/test/expectSpinner';
 import { render } from 'utils/test/render';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
@@ -65,14 +61,14 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       label: 'course',
       course: CourseFactory().one(),
       organization: undefined,
-      courseProductRelation: undefined,
+      offer: undefined,
       expectedRoutes: [TeacherDashboardPaths.COURSE_GENERAL_INFORMATION],
     },
     {
       label: 'training',
       course: CourseFactory().one(),
       organization: undefined,
-      courseProductRelation: CourseProductRelationFactory().one(),
+      offer: OfferFactory().one(),
       expectedRoutes: [
         TeacherDashboardPaths.COURSE_PRODUCT,
         TeacherDashboardPaths.COURSE_PRODUCT_CONTRACTS,
@@ -83,14 +79,14 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       label: "organization's course",
       course: CourseFactory().one(),
       organization: OrganizationFactory().one(),
-      courseProductRelation: undefined,
+      offer: undefined,
       expectedRoutes: [TeacherDashboardPaths.ORGANIZATION_COURSE_GENERAL_INFORMATION],
     },
     {
       label: "organization's training",
       course: CourseFactory().one(),
       organization: OrganizationFactory().one(),
-      courseProductRelation: CourseProductRelationFactory().one(),
+      offer: OfferFactory().one(),
       expectedRoutes: [
         TeacherDashboardPaths.ORGANIZATION_PRODUCT,
         TeacherDashboardPaths.ORGANIZATION_PRODUCT_CONTRACTS,
@@ -99,20 +95,20 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
     },
   ])(
     'should display menu items for "$label" route',
-    async ({ course, organization, courseProductRelation, expectedRoutes }) => {
+    async ({ course, organization, offer, expectedRoutes }) => {
       // mock api for organization's training
-      if (organization && courseProductRelation) {
+      if (organization && offer) {
         // 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`,
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/contracts/?offer_id=${offer.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,
+          `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/offers/${offer.id}/`,
+          offer,
         );
       } else if (organization) {
         // fetching organization's course
@@ -121,18 +117,12 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           `https://joanie.endpoint/api/v1.0/organizations/${organization.id}/courses/${course.id}/`,
           course,
         );
-      } else if (courseProductRelation) {
+      } else if (offer) {
         // fetching training
         nbApiRequest += 1;
-        fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/course-product-relations/${courseProductRelation.id}/`,
-          courseProductRelation,
-        );
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/offers/${offer.id}/`, offer);
         nbApiRequest += 1;
-        fetchMock.get(
-          `https://joanie.endpoint/api/v1.0/organizations/?course_product_relation_id=${courseProductRelation.id}`,
-          [],
-        );
+        fetchMock.get(`https://joanie.endpoint/api/v1.0/organizations/?offer_id=${offer.id}`, []);
       } else {
         // mock api for course
         nbApiRequest += 1;
@@ -142,9 +132,9 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
       let routePath = '/:courseId';
       let initialEntry = `/${course.id}`;
 
-      if (courseProductRelation) {
-        routePath += '/:courseProductRelationId';
-        initialEntry += `/${courseProductRelation.id}`;
+      if (offer) {
+        routePath += '/:offerId';
+        initialEntry += `/${offer.id}`;
       }
       if (organization) {
         routePath = '/:organizationId' + routePath;
@@ -168,7 +158,7 @@ describe('<TeacherDashboardCourseSidebar/>', () => {
           generatePath(expectedRoute, {
             organizationId: organization ? organization.id : null,
             courseId: course.id,
-            courseProductRelationId: courseProductRelation ? courseProductRelation.id : null,
+            offerId: offer ? offer.id : null,
           }),
         );
       });

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

@@ -2,12 +2,12 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { generatePath, useParams } from 'react-router';
 import { useMemo } from 'react';
 import { capitalize } from 'lodash-es';
+import { useOffer } from 'hooks/useOffer';
 import { DashboardSidebar, MenuLink } from 'widgets/Dashboard/components/DashboardSidebar';
 import { getDashboardRouteLabel } from 'widgets/Dashboard/utils/dashboardRoutes';
 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/teacherDashboardPaths';
 import ContractNavLink from '../DashboardSidebar/components/ContractNavLink';
 import { getMenuRoutes } from './utils';
@@ -41,11 +41,11 @@ export const TeacherDashboardCourseSidebar = () => {
   const {
     organizationId: routeOrganizationId,
     courseId: routeCourseId,
-    courseProductRelationId: routeCourseProductRelationId = '',
+    offerId: routeofferId = '',
   } = useParams<{
     organizationId?: string;
     courseId: string;
-    courseProductRelationId: string;
+    offerId: string;
   }>();
 
   const {
@@ -54,38 +54,29 @@ export const TeacherDashboardCourseSidebar = () => {
   } = useCourse(
     routeCourseId,
     { organization_id: routeOrganizationId },
-    { enabled: !routeCourseProductRelationId },
+    { enabled: !routeofferId },
   );
 
   const {
-    item: courseProductRelation,
-    states: { fetching: courseProductRelationFetching },
-  } = useCourseProductRelation(
-    routeCourseProductRelationId,
+    item: offer,
+    states: { fetching: offerFetching },
+  } = useOffer(
+    routeofferId,
     {
       organization_id: routeOrganizationId,
     },
-    { enabled: !!routeCourseProductRelationId },
+    { enabled: !!routeofferId },
   );
 
-  const fetching = useMemo(
-    () => courseFetching || courseProductRelationFetching,
-    [courseFetching, courseProductRelationFetching],
-  );
-  const product = useMemo(
-    () => (courseProductRelation ? courseProductRelation.product : undefined),
-    [courseProductRelation],
-  );
-  const course = useMemo(
-    () => (courseProductRelation ? courseProductRelation.course : singleCourse),
-    [courseProductRelation, singleCourse],
-  );
+  const fetching = useMemo(() => courseFetching || offerFetching, [courseFetching, offerFetching]);
+  const product = useMemo(() => (offer ? offer.product : undefined), [offer]);
+  const course = useMemo(() => (offer ? offer.course : singleCourse), [offer, singleCourse]);
 
   const getMenuLinkFromPath = (basePath: TeacherDashboardPaths) => {
     const path = generatePath(basePath, {
       organizationId: routeOrganizationId ?? '',
       courseId: routeCourseId ?? '',
-      courseProductRelationId: routeCourseProductRelationId ?? '',
+      offerId: routeofferId ?? '',
     });
     const menuLink: MenuLink = {
       to: path,
@@ -102,7 +93,7 @@ export const TeacherDashboardCourseSidebar = () => {
         <ContractNavLink
           link={menuLink}
           organizationId={routeOrganizationId}
-          courseProductRelationId={routeCourseProductRelationId}
+          offerId={routeofferId}
         />
       );
     }
@@ -112,10 +103,10 @@ export const TeacherDashboardCourseSidebar = () => {
   const menuLinkList = useMemo(
     () =>
       getMenuRoutes({
-        courseProductRelationId: routeCourseProductRelationId,
+        offerId: routeofferId,
         organizationId: routeOrganizationId,
       }).map(getMenuLinkFromPath),
-    [routeOrganizationId, routeCourseProductRelationId],
+    [routeOrganizationId, routeofferId],
   );
 
   return (

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

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

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

@@ -24,9 +24,9 @@ const messages = defineMessages({
 export const TeacherDashboardOrganizationSidebar = () => {
   const intl = useIntl();
   const getRouteLabel = getDashboardRouteLabel(intl);
-  const { organizationId, courseProductRelationId } = useParams<{
+  const { organizationId, offerId } = useParams<{
     organizationId: string;
-    courseProductRelationId?: string;
+    offerId?: string;
   }>();
   const {
     item: organization,
@@ -43,11 +43,7 @@ export const TeacherDashboardOrganizationSidebar = () => {
 
     if (basePath === TeacherDashboardPaths.ORGANIZATION_CONTRACTS) {
       menuLink.component = (
-        <ContractNavLink
-          link={menuLink}
-          organizationId={organizationId}
-          courseProductRelationId={courseProductRelationId}
-        />
+        <ContractNavLink link={menuLink} organizationId={organizationId} offerId={offerId} />
       );
     }
 

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

@@ -9,14 +9,14 @@ export enum TeacherDashboardPaths {
   ORGANIZATION = `${ROOT}/organizations/:organizationId`,
   ORGANIZATION_CONTRACTS = `${ORGANIZATION}/contracts`,
   ORGANIZATION_COURSES = `${ORGANIZATION}/courses`,
-  ORGANIZATION_PRODUCT = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId`,
+  ORGANIZATION_PRODUCT = `${ORGANIZATION_COURSES}/:courseId/products/:offerId`,
   ORGANIZATION_COURSE_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/contracts`,
-  ORGANIZATION_PRODUCT_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId/contracts`,
-  ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST = `${ORGANIZATION_COURSES}/:courseId/products/:courseProductRelationId/learners`,
+  ORGANIZATION_PRODUCT_CONTRACTS = `${ORGANIZATION_COURSES}/:courseId/products/:offerId/contracts`,
+  ORGANIZATION_COURSE_PRODUCT_LEARNER_LIST = `${ORGANIZATION_COURSES}/:courseId/products/:offerId/learners`,
   ORGANIZATION_COURSE_GENERAL_INFORMATION = `${ORGANIZATION_COURSES}/:courseId/information`,
   COURSE = `${TEACHER_COURSES}/:courseId`,
   COURSE_GENERAL_INFORMATION = `${COURSE}/information`,
-  COURSE_PRODUCT = `${COURSE}/products/:courseProductRelationId`,
+  COURSE_PRODUCT = `${COURSE}/products/:offerId`,
   COURSE_PRODUCT_LEARNER_LIST = `${COURSE_PRODUCT}/learners`,
   COURSE_PRODUCT_CONTRACTS = `${COURSE_PRODUCT}/contracts`,
 }

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/CourseProductItemFooter/index.tsx

@@ -1,6 +1,6 @@
 import { FormattedMessage, defineMessages } from 'react-intl';
 import PurchaseButton from 'components/PurchaseButton';
-import { CourseProductRelation, CredentialProduct } from 'types/Joanie';
+import { Offer, CredentialProduct } from 'types/Joanie';
 import { PacedCourse } from 'types';
 
 const messages = defineMessages({
@@ -24,20 +24,12 @@ other {# remaining seats}
 
 interface CourseProductItemFooterProps {
   course: PacedCourse;
-  courseProductRelation: CourseProductRelation;
+  offer: Offer;
   canPurchase: boolean;
 }
 
-const CourseProductItemFooter = ({
-  course,
-  courseProductRelation,
-  canPurchase,
-}: CourseProductItemFooterProps) => {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  const { seats, nb_seats_available } = courseProductRelation;
-  const hasSeatsLimit = seats && nb_seats_available !== undefined;
-  const hasNoSeatsAvailable = hasSeatsLimit && nb_seats_available === 0;
-  if (hasNoSeatsAvailable)
+const CourseProductItemFooter = ({ course, offer, canPurchase }: CourseProductItemFooterProps) => {
+  if (!offer.rules.has_seats_left)
     return (
       <p className="product-widget__footer__message">
         <FormattedMessage {...messages.noSeatsAvailable} />
@@ -47,18 +39,18 @@ const CourseProductItemFooter = ({
     <div className="product-widget__footer__order-group">
       <PurchaseButton
         course={course}
-        product={courseProductRelation.product as CredentialProduct}
-        courseProductRelation={courseProductRelation}
-        organizations={courseProductRelation.organizations}
-        isWithdrawable={courseProductRelation.is_withdrawable}
+        product={offer.product as CredentialProduct}
+        offer={offer}
+        organizations={offer.organizations}
+        isWithdrawable={offer.is_withdrawable}
         disabled={!canPurchase}
         buttonProps={{ fullWidth: true }}
       />
-      {hasSeatsLimit && (
+      {offer.rules.has_seat_limit && (
         <p className="product-widget__footer__message">
           <FormattedMessage
             {...messages.nbSeatsAvailable}
-            values={{ nb: courseProductRelation.nb_seats_available }}
+            values={{ nb: offer.rules.nb_available_seats }}
           />
         </p>
       )}