feat: enable allocation of restricted runs

ENT-9411
openedx · Dec 3, 2024 · 5e2d0bd · 5e2d0bd
1 parent 349cae2
commit 5e2d0bd
Show file tree

Hide file tree

Showing 12 changed files with 417 additions and 34 deletions.
diff --git a/src/components/learner-credit-management/assignment-modal/NewAssignmentModalButton.jsx b/src/components/learner-credit-management/assignment-modal/NewAssignmentModalButton.jsx
@@ -16,12 +16,18 @@ import EnterpriseAccessApiService from '../../../data/services/EnterpriseAccessA
 import EVENT_NAMES from '../../../eventTracking';
 import { BudgetDetailPageContext } from '../BudgetDetailPageWrapper';
 import {
-  getAssignableCourseRuns, learnerCreditManagementQueryKeys, LEARNER_CREDIT_ROUTE, useBudgetId,
-  useSubsidyAccessPolicy, useEnterpriseFlexGroups,
+  getAssignableCourseRuns,
+  LEARNER_CREDIT_ROUTE,
+  learnerCreditManagementQueryKeys,
+  useBudgetId,
+  useCatalogContainsContentItemsMultipleQueries,
+  useEnterpriseFlexGroups,
+  useSubsidyAccessPolicy,
 } from '../data';
 import AssignmentModalContent from './AssignmentModalContent';
 import CreateAllocationErrorAlertModals from './CreateAllocationErrorAlertModals';
 import NewAssignmentModalDropdown from './NewAssignmentModalDropdown';
+import { ENTERPRISE_RESTRICTION_TYPE } from '../data/constants';
 
 const useAllocateContentAssignments = () => useMutation({
   mutationFn: async ({
@@ -74,10 +80,23 @@ const NewAssignmentModalButton = ({ enterpriseId, course, children }) => {
     assignmentConfiguration,
     isLateRedemptionAllowed,
   };
+  const {
+    dataByContentKey: catalogContainsRestrictedRunsData,
+    isLoading: isLoadingcatalogContainsRestrictedRuns,
+  } = useCatalogContainsContentItemsMultipleQueries(
+    catalogUuid,
+    course.courseRuns?.filter(
+      // Pass only restricted runs.
+      run => run.restrictionType === ENTERPRISE_RESTRICTION_TYPE,
+    ).map(
+      run => run.key,
+    ),
+  );
   const assignableCourseRuns = getAssignableCourseRuns({
     courseRuns: course.courseRuns,
     subsidyExpirationDatetime: subsidyAccessPolicy.subsidyExpirationDatetime,
     isLateRedemptionAllowed,
+    catalogContainsRestrictedRunsData,
   });
   const { mutate } = useAllocateContentAssignments();
   const pathToActivityTab = generatePath(LEARNER_CREDIT_ROUTE, {
@@ -219,7 +238,12 @@ const NewAssignmentModalButton = ({ enterpriseId, course, children }) => {
   };
   return (
     <>
-      <NewAssignmentModalDropdown id={course.key} onClick={handleOpenAssignmentModal} courseRuns={assignableCourseRuns}>
+      <NewAssignmentModalDropdown
+        id={course.key}
+        onClick={handleOpenAssignmentModal}
+        courseRuns={assignableCourseRuns}
+        isLoading={isLoadingcatalogContainsRestrictedRuns}
+      >
         {children}
       </NewAssignmentModalDropdown>
       <FullscreenModal

diff --git a/src/components/learner-credit-management/assignment-modal/NewAssignmentModalDropdown.jsx b/src/components/learner-credit-management/assignment-modal/NewAssignmentModalDropdown.jsx
@@ -1,5 +1,5 @@
 import { defineMessages, useIntl } from '@edx/frontend-platform/i18n';
-import { Dropdown, Stack } from '@openedx/paragon';
+import { Dropdown, Skeleton, Stack } from '@openedx/paragon';
 import dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 import { useState } from 'react';
@@ -34,6 +34,7 @@ const NewAssignmentModalDropdown = ({
   onClick: openAssignmentModal,
   courseRuns,
   children,
+  isLoading,
 }) => {
   const intl = useIntl();
   const [clickedDropdownItem, setClickedDropdownItem] = useState(null);
@@ -59,26 +60,31 @@ const NewAssignmentModalDropdown = ({
         <Dropdown.Header className="text-uppercase">
           {courseRuns.length > 0 ? intl.formatMessage(messages.byDate) : intl.formatMessage(messages.noAvailableDates) }
         </Dropdown.Header>
-        {courseRuns.length > 0 && courseRuns.map(courseRun => (
-          <Dropdown.Item
-            key={courseRun.key}
-            data-courserunkey={courseRun.key}
-            onMouseDown={() => setClickedDropdownItem(courseRun)}
-            onMouseUp={() => setClickedDropdownItem(null)}
-          >
-            <Stack>
-              {intl.formatMessage(messages.startDate, {
-                startLabel: startLabel(courseRun),
-                startDate: dayjs(courseRun.start).format(SHORT_MONTH_DATE_FORMAT),
-              })}
-              <span className={classNames('small', { 'text-muted': getDropdownItemClassName(courseRun) })}>
-                {intl.formatMessage(messages.enrollBy, {
-                  enrollByDate: dayjs(courseRun.enrollBy).format(SHORT_MONTH_DATE_FORMAT),
+        {courseRuns.length > 0 && courseRuns.map(courseRun => {
+          if (isLoading) {
+            return (<span className="dropdown-item" data-testid="assignment-dropdown-item"><Skeleton /></span>);
+          }
+          return (
+            <Dropdown.Item
+              key={courseRun.key}
+              data-courserunkey={courseRun.key}
+              onMouseDown={() => setClickedDropdownItem(courseRun)}
+              onMouseUp={() => setClickedDropdownItem(null)}
+            >
+              <Stack>
+                {intl.formatMessage(messages.startDate, {
+                  startLabel: startLabel(courseRun),
+                  startDate: dayjs(courseRun.start).format(SHORT_MONTH_DATE_FORMAT),
                 })}
-              </span>
-            </Stack>
-          </Dropdown.Item>
-        ))}
+                <span className={classNames('small', { 'text-muted': getDropdownItemClassName(courseRun) })}>
+                  {intl.formatMessage(messages.enrollBy, {
+                    enrollByDate: dayjs(courseRun.enrollBy).format(SHORT_MONTH_DATE_FORMAT),
+                  })}
+                </span>
+              </Stack>
+            </Dropdown.Item>
+          );
+        })}
       </Dropdown.Menu>
     </Dropdown>
   );
@@ -93,6 +99,7 @@ NewAssignmentModalDropdown.propTypes = {
     start: PropTypes.string,
   })).isRequired,
   children: PropTypes.node.isRequired,
+  isLoading: PropTypes.bool.isRequired,
 };
 
 export default NewAssignmentModalDropdown;
diff --git a/src/components/learner-credit-management/cards/BaseCourseCard.jsx b/src/components/learner-credit-management/cards/BaseCourseCard.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import {
-  Badge, breakpoints, Card, Stack, useMediaQuery,
+  Badge, breakpoints, Card, Skeleton, Stack, useMediaQuery,
 } from '@openedx/paragon';
 import { camelCaseObject } from '@edx/frontend-platform/utils';
 
@@ -35,7 +35,14 @@ const BaseCourseCard = ({
     formattedPrice,
     isExecEdCourseType,
     footerText,
+    isLoadingcatalogContainsRestrictedRuns,
   } = courseCardMetadata;
+  const coursePrice = (
+    isLoadingcatalogContainsRestrictedRuns
+      ? <span data-testid="course-price-skeleton"><Skeleton /></span>
+      : formattedPrice
+  );
+  const cardPrice = courseRun ? formatPrice(courseRun.contentPrice) : coursePrice;
   return (
     <Card orientation={isSmall ? 'vertical' : 'horizontal'} className={cardClassName}>
       <Card.ImageCap
@@ -50,7 +57,7 @@ const BaseCourseCard = ({
           subtitle={subtitle}
           actions={(
             <Stack gap={1} className="text-right">
-              <div className="h4 mt-2.5 mb-0">{courseRun ? formatPrice(courseRun.contentPrice) : formattedPrice}</div>
+              <div className="h4 mt-2.5 mb-0">{cardPrice}</div>
               <span className="micro">
                 <FormattedMessage
                   id="lcm.budget.detail.page.catalog.tab.course.card.price.per.learner"

diff --git a/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx b/src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx
@@ -10,14 +10,16 @@ import {
   getAssignableCourseRuns,
   getEnrollmentDeadline,
   useBudgetId,
+  useCatalogContainsContentItemsMultipleQueries,
   useSubsidyAccessPolicy,
 } from '../../data';
 import { pluralText } from '../../../../utils';
+import { ENTERPRISE_RESTRICTION_TYPE } from '../../data/constants';
 
 const messages = defineMessages({
   courseFooterMessage: {
     id: 'lcm.budget.detail.page.catalog.tab.course.card.footer-text',
-    defaultMessage: '({courseRuns}) available {pluralText}',
+    defaultMessage: '({numCourseRuns}) available {pluralText}',
     description: 'Footer text for a course card result for learner credit management',
   },
 });
@@ -54,10 +56,24 @@ const useCourseCardMetadata = ({
     title,
     courseRuns,
   } = course;
+  const {
+    dataByContentKey: catalogContainsRestrictedRunsData,
+    isLoading: isLoadingcatalogContainsRestrictedRuns,
+  } = useCatalogContainsContentItemsMultipleQueries(
+    subsidyAccessPolicy.catalogUuid,
+    courseRuns?.filter(
+      // Pass only restricted runs.
+      run => run.restrictionType === ENTERPRISE_RESTRICTION_TYPE,
+    ).map(
+      run => run.key,
+    ),
+  );
+
   const assignableCourseRuns = getAssignableCourseRuns({
     courseRuns,
     subsidyExpirationDatetime: subsidyAccessPolicy.subsidyExpirationDatetime,
     isLateRedemptionAllowed: subsidyAccessPolicy.isLateRedemptionAllowed,
+    catalogContainsRestrictedRunsData,
   });
 
   // Extracts the content price from assignable course runs
@@ -82,7 +98,7 @@ const useCourseCardMetadata = ({
   }
 
   const footerText = intl.formatMessage(messages.courseFooterMessage, {
-    courseRuns: assignableCourseRuns.length,
+    numCourseRuns: assignableCourseRuns.length,
     pluralText: pluralText('date', assignableCourseRuns.length),
   });
 
@@ -98,6 +114,7 @@ const useCourseCardMetadata = ({
     linkToCourse,
     isExecEdCourseType,
     footerText,
+    isLoadingcatalogContainsRestrictedRuns,
   };
 };