feat: enable allocation of restricted runs

src/components/learner-credit-management/assignment-modal/NewAssignmentModalButton.jsx

@@ -16,8 +16,13 @@ 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';
@@ -74,10 +79,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 === 'custom-e2e-enterprise', // TODO: replace with constant
+    ).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 +237,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

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"><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;

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,10 @@ const BaseCourseCard = ({
     formattedPrice,
     isExecEdCourseType,
     footerText,
+    isLoadingcatalogContainsRestrictedRuns,
   } = courseCardMetadata;
+  const coursePrice = isLoadingcatalogContainsRestrictedRuns ? <Skeleton /> : formattedPrice;
+  const cardPrice = courseRun ? formatPrice(courseRun.contentPrice) : coursePrice;
   return (
     <Card orientation={isSmall ? 'vertical' : 'horizontal'} className={cardClassName}>
       <Card.ImageCap
@@ -50,7 +53,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"

src/components/learner-credit-management/cards/data/useCourseCardMetadata.jsx

@@ -10,14 +10,15 @@ import {
   getAssignableCourseRuns,
   getEnrollmentDeadline,
   useBudgetId,
+  useCatalogContainsContentItemsMultipleQueries,
   useSubsidyAccessPolicy,
 } from '../../data';
 import { pluralText } from '../../../../utils';
 
 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 +55,24 @@ const useCourseCardMetadata = ({
     title,
     courseRuns,
   } = course;
+  const {
+    dataByContentKey: catalogContainsRestrictedRunsData,
+    isLoading: isLoadingcatalogContainsRestrictedRuns,
+  } = useCatalogContainsContentItemsMultipleQueries(
+    subsidyAccessPolicy.catalogUuid,
+    courseRuns?.filter(
+      // Pass only restricted runs.
+      run => run.restrictionType === 'custom-e2e-enterprise', // TODO: replace with constant
+    ).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 +97,7 @@ const useCourseCardMetadata = ({
   }
 
   const footerText = intl.formatMessage(messages.courseFooterMessage, {
-    courseRuns: assignableCourseRuns.length,
+    numCourseRuns: assignableCourseRuns.length,
     pluralText: pluralText('date', assignableCourseRuns.length),
   });
 
@@ -98,6 +113,7 @@ const useCourseCardMetadata = ({
     linkToCourse,
     isExecEdCourseType,
     footerText,
+    isLoadingcatalogContainsRestrictedRuns,
   };
 };
 

src/components/learner-credit-management/cards/tests/CourseCard.test.jsx

@@ -20,6 +20,7 @@ import {
   useBudgetId,
   useSubsidyAccessPolicy,
   useEnterpriseFlexGroups,
+  useCatalogContainsContentItemsMultipleQueries,
 } from '../../data';
 import { getButtonElement, queryClient } from '../../../test/testUtils';
 
@@ -51,6 +52,7 @@ jest.mock('../../data', () => ({
   useBudgetId: jest.fn(),
   useSubsidyAccessPolicy: jest.fn(),
   useEnterpriseFlexGroups: jest.fn(),
+  useCatalogContainsContentItemsMultipleQueries: jest.fn(),
 }));
 jest.mock('../../data/hooks/useEnterpriseFlexGroups');
 jest.mock('../../../../data/services/EnterpriseAccessApiService');
@@ -286,6 +288,11 @@ describe('Course card works as expected', () => {
     useEnterpriseFlexGroups.mockReturnValue({
       data: mockEnterpriseFlexGroup,
     });
+    useCatalogContainsContentItemsMultipleQueries.mockReturnValue({
+      data: {},
+      dataByContentKey: {},
+      isLoading: false,
+    });
   });
 
   afterEach(() => {

src/components/learner-credit-management/data/constants.js

@@ -125,6 +125,12 @@ export const learnerCreditManagementQueryKeys = {
   budgetGroupLearners: (budgetId) => [...learnerCreditManagementQueryKeys.budget(budgetId), 'group learners'],
   enterpriseCustomer: (enterpriseId) => [...learnerCreditManagementQueryKeys.all, 'enterpriseCustomer', enterpriseId],
   flexGroup: (enterpriseId) => [...learnerCreditManagementQueryKeys.enterpriseCustomer(enterpriseId), 'flexGroup'],
+  catalog: (catalog) => [...learnerCreditManagementQueryKeys.all, 'catalog', catalog],
+  catalogContainsContentItem: (catalogUuid, contentKey) => [
+    ...learnerCreditManagementQueryKeys.catalog(catalogUuid),
+    'containsContentItem',
+    contentKey,
+  ],
 };
 
 // Route to learner credit

src/components/learner-credit-management/data/hooks/index.js

@@ -24,3 +24,5 @@
 export { default as useEnterpriseFlexGroups } from './useEnterpriseFlexGroups';
 export { default as useGroupDropdownToggle } from './useGroupDropdownToggle';
 export { default as useEnterpriseLearners } from './useEnterpriseLearners';
+export { default as useCatalogContainsContentItemsMultipleQueries } from './useCatalogContainsContentItemsMultipleQueries';
+

src/components/learner-credit-management/data/hooks/useCatalogContainsContentItemsMultipleQueries.js

@@ -0,0 +1,48 @@
+import { useQueries } from '@tanstack/react-query';
+import { camelCaseObject } from '@edx/frontend-platform/utils';
+
+import EnterpriseCatalogApiServiceV2 from '../../../../data/services/EnterpriseCatalogApiServiceV2';
+import { learnerCreditManagementQueryKeys } from '../constants';
+
+/**
+ * Retrieves a response from the following enterprise-catalog endpoint for a SINGLE content key:
+ *
+ * /api/v2/enterprise-catalogs/{uuid}/contains_content_items/?course_run_ids={content_key}
+ *
+ * @param {*} queryKey The queryKey from the associated `useQuery` call.
+ * @returns The contains_content_items response.
+ */
+const getCatalogContainsContentItem = async ({ queryKey }) => {
+  const catalogUuid = queryKey[2];
+  const contentKey = queryKey[4];
+  const response = await EnterpriseCatalogApiServiceV2.retrieveContainsContentItems(catalogUuid, contentKey);
+  return camelCaseObject(response.data);
+};
+
+const useCatalogContainsContentItemsMultipleQueries = (catalogUuid, contentKeys = [], { queryOptions } = {}) => {
+  const multipleResults = useQueries({
+    queries: contentKeys.map((contentKey) => ({
+      queryKey: learnerCreditManagementQueryKeys.catalogContainsContentItem(catalogUuid, contentKey),
+      queryFn: getCatalogContainsContentItem,
+      enabled: !!catalogUuid,
+      ...queryOptions,
+    })),
+  });
+  return {
+    data: multipleResults.map(result => result.data),
+    // Reproduce the above results, but in a form that is more convenient for
+    // consumers.  This only works because we can safely assume the results
+    // from useQueries are ordered the same as its inputs.
+    dataByContentKey: Object.fromEntries(multipleResults.map((result, i) => [contentKeys[i], result.data])),
+    // This whole hook is considered to be still loading if at least one query
+    // is still loading, implying either that the upstream waterfall query to
+    // fetch the policy has not yet returned, or at least one call to
+    // contains-content-items is still being requested.
+    isLoading: multipleResults.length !== 0 && multipleResults.some(result => result.isLoading),
+    isFetching: multipleResults.length !== 0 && multipleResults.some(result => result.isFetching),
+    isError: multipleResults.length !== 0 && multipleResults.some(result => result.isError),
+    errorByContentKey: Object.fromEntries(multipleResults.map((result, i) => [contentKeys[i], result.error])),
+  };
+};
+
+export default useCatalogContainsContentItemsMultipleQueries;

src/components/learner-credit-management/data/utils.js

@@ -688,8 +688,20 @@ export const startAndEnrollBySortLogic = (prev, next) => {
  * @param isLateRedemptionAllowed
  * @returns {*}
  */
-export const getAssignableCourseRuns = ({ courseRuns, subsidyExpirationDatetime, isLateRedemptionAllowed }) => {
-  const clonedCourseRuns = courseRuns.map(courseRun => ({
+export const getAssignableCourseRuns = ({
+  courseRuns, subsidyExpirationDatetime,
+  isLateRedemptionAllowed,
+  catalogContainsRestrictedRunsData,
+}) => {
+  // First, whittle down the runs to just the ones that are either completely
+  // unrestricted, or restricted but allowed for the current subsidy.
+  const unrestrictedCourseRuns = courseRuns.filter(courseRun => {
+    if (!courseRun.restrictionType) {
+      return true;
+    }
+    return !!catalogContainsRestrictedRunsData?.[courseRun.key]?.containsContentItems;
+  });
+  const clonedCourseRuns = unrestrictedCourseRuns.map(courseRun => ({
     ...courseRun,
     enrollBy: courseRun.hasEnrollBy ? dayjs.unix(courseRun.enrollBy).toISOString() : null,
     enrollStart: courseRun.hasEnrollStart ? dayjs.unix(courseRun.enrollStart).toISOString() : null,

src/data/services/EnterpriseCatalogApiServiceV2.js

@@ -0,0 +1,34 @@
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+
+import { configuration } from '../../config';
+
+class EnterpriseCatalogApiServiceV2 {
+  static baseUrl = `${configuration.ENTERPRISE_CATALOG_BASE_URL}/api/v2`;
+
+  static apiClient = getAuthenticatedHttpClient;
+
+  static enterpriseCatalogsUrl = `${EnterpriseCatalogApiServiceV2.baseUrl}/enterprise-catalogs/`;
+
+  /**
+   * Retrieves the enterprise-catalog based contains_content_items endpoint for
+   * ONE content key:
+   *
+   * /api/v2/enterprise-catalogs/{uuid}/contains_content_items/?course_run_ids={content_key}
+   *
+   * This endpoint technically supports an arbitrary number of content keys,
+   * but this function only supports one.
+   *
+   * @param {*} catalogUuid The catalog to check for content inclusion.
+   * @param {*} contentKey The content to check for inclusion in the requested catalog.
+   */
+  static retrieveContainsContentItems(catalogUuid, contentKey) {
+    const queryParams = new URLSearchParams();
+    queryParams.append('course_run_ids', contentKey);
+    const baseCatalogUrl = `${EnterpriseCatalogApiServiceV2.enterpriseCatalogsUrl}${catalogUuid}`;
+    return EnterpriseCatalogApiServiceV2.apiClient().get(
+      `${baseCatalogUrl}/contains_content_items/?${queryParams.toString()}`,
+    );
+  }
+}
+
+export default EnterpriseCatalogApiServiceV2;