feat: UI updates expired workflow

openedx · Jul 15, 2024 · 88449b4 · 88449b4
1 parent 45f7fbc
commit 88449b4
Show file tree

Hide file tree

Showing 18 changed files with 320 additions and 154 deletions.
diff --git a/src/components/EnterpriseSubsidiesContext/data/hooks.js b/src/components/EnterpriseSubsidiesContext/data/hooks.js
@@ -12,7 +12,7 @@ import SubsidyApiService from '../../../data/services/EnterpriseSubsidyApiServic
 import { BUDGET_TYPES } from '../../EnterpriseApp/data/constants';
 import EnterpriseAccessApiService from '../../../data/services/EnterpriseAccessApiService';
 import { learnerCreditManagementQueryKeys } from '../../learner-credit-management/data';
-import { isAssignableSubsidyAccessPolicyType } from '../../../utils';
+import { isAssignableSubsidyAccessPolicyType, isSubsidyAccessPolicyEnded } from '../../../utils';
 
 dayjs.extend(isBetween);
 
@@ -76,6 +76,7 @@ async function fetchEnterpriseBudgets({
         pending: result.aggregates.amountAllocatedUsd,
       },
       isAssignable: isAssignableSubsidyAccessPolicyType(result),
+      isEnded: isSubsidyAccessPolicyEnded(result),
       isRetired: result.retired,
       retiredAt: result.retiredAt,
     });

diff --git a/src/components/learner-credit-management/AssignmentAmountTableCell.jsx b/src/components/learner-credit-management/AssignmentAmountTableCell.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { formatPrice, useBudgetId, useSubsidyAccessPolicy } from './data';
+import {
+  formatPrice, useBudgetId, useSubsidyAccessPolicy,
+} from './data';
 
 const AssignmentAmountTableCell = ({ row }) => {
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
-  const isRetired = !!subsidyAccessPolicy?.retired;
+  const isEnded = !!subsidyAccessPolicy?.isEnded;
 
-  if (isRetired) {
+  if (isEnded) {
     return (
       <strike>-{formatPrice(row.original.contentQuantity / 100)}</strike>
     );

diff --git a/src/components/learner-credit-management/AssignmentStatusTableCell.jsx b/src/components/learner-credit-management/AssignmentStatusTableCell.jsx
@@ -10,7 +10,9 @@ import FailedSystem from './assignments-status-chips/FailedSystem';
 import NotifyingLearner from './assignments-status-chips/NotifyingLearner';
 import WaitingForLearner from './assignments-status-chips/WaitingForLearner';
 import { capitalizeFirstLetter } from '../../utils';
-import { useBudgetId, useSubsidyAccessPolicy } from './data';
+import {
+  useBudgetId, useSubsidyAccessPolicy,
+} from './data';
 import IncompleteAssignment from './assignments-status-chips/IncompleteAssignment';
 
 const AssignmentStatusTableCell = ({ enterpriseId, row }) => {
@@ -22,8 +24,9 @@ const AssignmentStatusTableCell = ({ enterpriseId, row }) => {
   } = original;
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
+  const isEnded = !!subsidyAccessPolicy?.isEnded;
   const {
-    retired: isRetired, subsidyUuid, assignmentConfiguration, isSubsidyActive, isAssignable, catalogUuid, aggregates,
+    subsidyUuid, assignmentConfiguration, isSubsidyActive, isAssignable, catalogUuid, aggregates,
   } = subsidyAccessPolicy;
 
   const sharedTrackEventMetadata = {
@@ -72,7 +75,7 @@ const AssignmentStatusTableCell = ({ enterpriseId, row }) => {
   }
 
   // Always display "Incomplete assignment" status chip for retired budgets
-  if (isRetired) {
+  if (isEnded) {
     return (
       <IncompleteAssignment trackEvent={sendGenericTrackEvent} />
     );

diff --git a/src/components/learner-credit-management/BudgetAssignmentsTable.jsx b/src/components/learner-credit-management/BudgetAssignmentsTable.jsx
@@ -11,7 +11,7 @@ import AssignmentRowActionTableCell from './AssignmentRowActionTableCell';
 import AssignmentTableRemindAction from './AssignmentTableRemind';
 import AssignmentTableCancelAction from './AssignmentTableCancel';
 import {
-  DEFAULT_PAGE, PAGE_SIZE, useBudgetId, useSubsidyAccessPolicy,
+  DEFAULT_PAGE, PAGE_SIZE,
 } from './data';
 import AssignmentRecentActionTableCell from './AssignmentRecentActionTableCell';
 import AssignmentsTableRefreshAction from './AssignmentsTableRefreshAction';
@@ -45,6 +45,7 @@ const BudgetAssignmentsTable = ({
   isLoading,
   tableData,
   fetchTableData,
+  isEnded,
 }) => {
   const intl = useIntl();
   const statusFilterChoices = tableData.learnerStateCounts
@@ -55,12 +56,8 @@ const BudgetAssignmentsTable = ({
       value: learnerState,
     }));
 
-  const { subsidyAccessPolicyId } = useBudgetId();
-  const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
-  const isRetired = !!subsidyAccessPolicy?.retired;
-
   const budgetAssignmentsTableData = (() => {
-    if (isRetired) {
+    if (isEnded) {
       return {
         tableActions: [],
         additionalColumns: [],
@@ -82,7 +79,7 @@ const BudgetAssignmentsTable = ({
   return (
     <DataTable
       isSortable
-      isSelectable={!isRetired}
+      isSelectable={!isEnded}
       manualSortBy
       isPaginated
       manualPagination
@@ -95,8 +92,7 @@ const BudgetAssignmentsTable = ({
       SelectionStatusComponent={DataTable.ControlledSelectionStatus}
       columns={[
         {
-          Header:
-          intl.formatMessage({
+          Header: intl.formatMessage({
             id: 'lcm.budget.detail.page.assignments.table.columns.assignment.details',
             defaultMessage: 'Assignment details',
             description: 'Column header for the assignment details column in the assignments table',
@@ -106,8 +102,7 @@ const BudgetAssignmentsTable = ({
           disableSortBy: true,
         },
         {
-          Header:
-          intl.formatMessage({
+          Header: intl.formatMessage({
             id: 'lcm.budget.detail.page.assignments.table.columns.amount',
             defaultMessage: 'Amount',
             description: 'Column header for the amount column in the assignments table',
@@ -117,22 +112,20 @@ const BudgetAssignmentsTable = ({
           disableFilters: true,
         },
         {
-          Header:
-          intl.formatMessage({
+          Header: intl.formatMessage({
             id: 'lcm.budget.detail.page.assignments.table.columns.status',
             defaultMessage: 'Status',
             description: 'Column header for the status column in the assignments table',
           }),
           accessor: 'learnerState',
           Cell: AssignmentStatusTableCell,
-          disableFilters: isRetired,
+          disableFilters: isEnded,
           Filter: CheckboxFilter,
           filter: 'includesValue',
           filterChoices: statusFilterChoices,
         },
         {
-          Header:
-          intl.formatMessage({
+          Header: intl.formatMessage({
             id: 'lcm.budget.detail.page.assignments.table.columns.recent.action',
             defaultMessage: 'Recent action',
             description: 'Column header for the recent action column in the assignments table',
@@ -142,7 +135,7 @@ const BudgetAssignmentsTable = ({
           disableFilters: true,
         },
         {
-          Header: AssignmentEnrollByDateHeader,
+          Header: <AssignmentEnrollByDateHeader />,
           accessor: 'earliestPossibleExpiration',
           Cell: AssignmentEnrollByDateCell,
           disableFilters: true,
@@ -188,6 +181,7 @@ BudgetAssignmentsTable.propTypes = {
     numPages: PropTypes.number.isRequired,
   }).isRequired,
   fetchTableData: PropTypes.func.isRequired,
+  isEnded: PropTypes.bool.isRequired,
 };
 
 export default BudgetAssignmentsTable;
diff --git a/src/components/learner-credit-management/BudgetCard.jsx b/src/components/learner-credit-management/BudgetCard.jsx
@@ -25,6 +25,7 @@ const BudgetCard = ({ original }) => {
     enterpriseUUID,
     id,
     isAssignable,
+    isEnded,
     isRetired,
     retiredAt,
     name,
@@ -51,6 +52,7 @@ const BudgetCard = ({ original }) => {
         displayName={name}
         enterpriseSlug={enterpriseSlug}
         isAssignable={isAssignable}
+        isEnded={isEnded}
         isRetired={isRetired}
         retiredAt={retiredAt}
       />
@@ -61,8 +63,9 @@ const BudgetCard = ({ original }) => {
   if (source === BUDGET_TYPES.ecommerce) {
     return (
       <SubBudgetCard
-        isLoading={isLoadingSubsidySummaryAnalyticsApi}
         id={subsidySummaryAnalyticsApi?.offerId}
+        isEnded={isEnded}
+        isLoading={isLoadingSubsidySummaryAnalyticsApi}
         start={start}
         end={end}
         available={subsidySummaryAnalyticsApi?.remainingFunds}
@@ -108,6 +111,7 @@ BudgetCard.propTypes = {
       pending: PropTypes.number,
     }),
     isAssignable: PropTypes.bool,
+    isEnded: PropTypes.bool,
     isRetired: PropTypes.bool,
     retiredAt: PropTypes.string,
     enterpriseUUID: PropTypes.string.isRequired,

diff --git a/src/components/learner-credit-management/BudgetDetailAssignments.jsx b/src/components/learner-credit-management/BudgetDetailAssignments.jsx
@@ -5,13 +5,19 @@ import { Hyperlink } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform/config';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import BudgetAssignmentsTable from './BudgetAssignmentsTable';
 import AssignMoreCoursesEmptyStateMinimal from './AssignMoreCoursesEmptyStateMinimal';
-import { useBudgetContentAssignments, useBudgetId, useSubsidyAccessPolicy } from './data';
+import {
+  getBudgetStatus,
+  useBudgetContentAssignments,
+  useBudgetId,
+  useSubsidyAccessPolicy,
+} from './data';
+import { BUDGET_STATUSES } from '../EnterpriseApp/data/constants';
 
 const BudgetDetailAssignmentsHeader = ({
-  isRetired,
+  status,
 }) => {
   const assignedHeadingRef = useRef();
   const navigate = useNavigate();
@@ -28,7 +34,7 @@ const BudgetDetailAssignmentsHeader = ({
     }
   }, [navigate, location, locationState]);
 
-  if (isRetired) {
+  if (status === BUDGET_STATUSES.retired || status === BUDGET_STATUSES.expired) {
     return (
       <>
         <h3 className="mb-3" ref={assignedHeadingRef}>
@@ -38,13 +44,24 @@ const BudgetDetailAssignmentsHeader = ({
             description="Heading for the incomplete assignments section on the budget detail page"
           />
         </h3>
-        <p className="small mb-4 text-info-900">
-          <FormattedMessage
-            id="lcm.budget.detail.page.incomplete.assignments.description"
-            defaultMessage="The assignments below were made before the budget was retired and were never completed by the learner."
-            description="Description for the incomplete assignments section on the budget detail page. Includes a link to learn more."
-          />
-        </p>
+        {status === BUDGET_STATUSES.retired && (
+          <p className="small mb-4 text-info-900">
+            <FormattedMessage
+              id="lcm.budget.detail.page.incomplete.assignments.description.retired"
+              defaultMessage="The assignments below were made before the budget was retired and were never completed by the learner."
+              description="Description for the incomplete assignments section on the budget detail page."
+            />
+          </p>
+        )}
+        {status === BUDGET_STATUSES.expired && (
+          <p className="small mb-4 text-info-900">
+            <FormattedMessage
+              id="lcm.budget.detail.page.incomplete.assignments.description.expired"
+              defaultMessage="The assignments below were made before the budget was expired and were never completed by the learner."
+              description="Description for the incomplete assignments section on the budget detail page."
+            />
+          </p>
+        )}
       </>
     );
   }
@@ -82,7 +99,7 @@ const BudgetDetailAssignmentsHeader = ({
 };
 
 BudgetDetailAssignmentsHeader.propTypes = {
-  isRetired: PropTypes.bool.isRequired,
+  status: PropTypes.string.isRequired,
 };
 
 const BudgetDetailAssignments = ({
@@ -91,12 +108,13 @@ const BudgetDetailAssignments = ({
   enterpriseFeatures,
   enterpriseId,
 }) => {
+  const intl = useIntl();
   const { subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
 
   const isAssignableBudget = !!subsidyAccessPolicy?.isAssignable;
-  const isRetired = !!subsidyAccessPolicy?.retired;
   const assignmentConfigurationUUID = subsidyAccessPolicy?.assignmentConfiguration?.uuid;
+  const isEnded = !!subsidyAccessPolicy?.isEnded;
   const isTopDownAssignmentEnabled = enterpriseFeatures.topDownAssignmentRealTimeLcm;
   const {
     isLoading,
@@ -107,6 +125,12 @@ const BudgetDetailAssignments = ({
     assignmentConfigurationUUID,
     enterpriseId,
   });
+  const { status } = getBudgetStatus({
+    intl,
+    startDateStr: subsidyAccessPolicy.subsidyActiveDatetime,
+    endDateStr: subsidyAccessPolicy.subsidyExpirationDatetime,
+    isBudgetRetired: subsidyAccessPolicy.retired,
+  });
 
   if (!isTopDownAssignmentEnabled || !isAssignableBudget) {
     return null;
@@ -120,11 +144,12 @@ const BudgetDetailAssignments = ({
 
   return (
     <section className="budget-detail-assignments">
-      <BudgetDetailAssignmentsHeader isRetired={isRetired} />
+      <BudgetDetailAssignmentsHeader status={status} />
       <BudgetAssignmentsTable
         isLoading={isLoading}
         tableData={contentAssignments}
         fetchTableData={fetchContentAssignments}
+        isEnded={isEnded}
       />
     </section>
   );