fix: fixing bug in learning budgets flow (#1689)

* fix: fixing bug in learning budgets flow

* fix: PR requests

Author: kiram15

src/components/ProductTours/AdminOnboardingTours/constants.js

@@ -53,6 +53,7 @@ export const ALLOCATE_LEARNING_BUDGETS_TARGETS = {
   INVITE_MEMBERS_BUDGET_BUTTON: 'invite-members-button',
   TRACK_BUDGET_ACTIVITY: 'track-budget-activity',
   BUDGET_TABLE: 'budget-table',
+  ZERO_STATE_ASSIGN_CARD: 'zero-state-assign-card',
   BUDGET_SPENT_TABLE: 'spent-budget-table',
   BUDGET_CATALOG_TAB: 'budget-catalog-tab',
   BUDGET_MEMBERS_TAB: 'budget-members-tab',

src/components/ProductTours/AdminOnboardingTours/flows/AdminOnboardingTour.tsx

@@ -76,7 +76,9 @@ const AdminOnboardingTour = (
   const administerSubscriptionsFlow = AdministerSubscriptionsFlow({
     currentStep, enterpriseSlug, handleEndTour, handleBackTour, setCurrentStep, targetSelector,
   });
-  const analyticsFlow = AnalyticsFlow({ handleAdvanceTour, handleBackTour, handleEndTour });
+  const analyticsFlow = AnalyticsFlow({
+    handleAdvanceTour, handleBackTour, handleEndTour,
+  });
   const customizeReportsFlow = CustomizeReportsFlow({ handleEndTour });
   const learnerProgressFlow = LearnerProgressFlow({
     handleAdvanceTour, handleBackTour, handleEndTour,
@@ -95,7 +97,6 @@ const AdminOnboardingTour = (
     setCurrentStep,
     targetSelector,
   });
-
   const setUpPreferencesFlow = SetUpPreferencesFlow({ handleEndTour });
 
   // Map target selectors to their respective flows

src/components/ProductTours/AdminOnboardingTours/flows/AllocateLearningBudgetsFlow.tsx

@@ -1,6 +1,7 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { useParams } from 'react-router';
+
 import { ALLOCATE_LEARNING_BUDGETS_TARGETS, ADMIN_TOUR_EVENT_NAMES } from '../constants';
 import messages from '../messages';
 import { TourStep } from '../../types';
@@ -67,8 +68,8 @@ const AllocateLearningBudgetsFlow = ({
 
   if (isOnBudgetPage) {
     if (policyType === 'Assignment') {
-      // Assignment budget with spend or assignment activity
-      if (isOnBudgetPage && (hasSpentTransactions || hasContentAssignments)) {
+      // Assignment budget with spend and assignment activity
+      if (hasSpentTransactions && hasContentAssignments) {
         return [
           {
             target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.BUDGET_DETAIL_CARD}`,
@@ -113,6 +114,51 @@ const AllocateLearningBudgetsFlow = ({
             onEnd: onAllocateEnd,
           },
         ];
+      } if (hasSpentTransactions && !hasContentAssignments) {
+        return [
+          {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.BUDGET_DETAIL_CARD}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepThreeAssignment),
+            onAdvance: onAllocateAdvance,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.NEW_ASSIGNMENT_BUDGET_BUTTON}`,
+            placement: 'bottom',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepFourAssignment),
+            onAdvance: onAllocateAdvance,
+            onBack: onAllocateBack,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.TRACK_BUDGET_ACTIVITY}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepFiveAssignment),
+            onAdvance: onAllocateAdvance,
+            onBack: onAllocateBack,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.ZERO_STATE_ASSIGN_CARD}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepSixSpendNoAssignment),
+            onAdvance: onAllocateAdvance,
+            onBack: onAllocateBack,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.BUDGET_SPENT_TABLE}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepSevenAssignment),
+            onAdvance: onAllocateAdvance,
+            onBack: onAllocateBack,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.BUDGET_CATALOG_TAB}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepEightAssignment),
+            onAdvance: onAllocateAdvance,
+            onBack: onAllocateBack,
+          }, {
+            target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.LEARNER_CREDIT_MANAGEMENT_BREADCRUMBS}`,
+            placement: 'top',
+            body: intl.formatMessage(messages.allocateLearningBudgetStepNine),
+            onBack: onAllocateBack,
+            onEnd: onAllocateEnd,
+          },
+        ];
       // Zero state assignment budget
       } if (!hasSpentTransactions && !hasContentAssignments) {
         return [
@@ -131,8 +177,7 @@ const AllocateLearningBudgetsFlow = ({
             placement: 'top',
             body: intl.formatMessage(messages.allocateLearningBudgetStepFiveAssignmentZeroState),
             onAdvance: onAllocateAdvance,
-          },
-          {
+          }, {
             target: `#${ALLOCATE_LEARNING_BUDGETS_TARGETS.BUDGET_CATALOG_TAB}`,
             placement: 'top',
             body: intl.formatMessage(messages.allocateLearningBudgetStepSixAssignmentZeroState),

src/components/ProductTours/AdminOnboardingTours/flows/LearnerProgressFlow.tsx

@@ -43,12 +43,6 @@ const LearnerProgressFlow = ({
     body: intl.formatMessage(messages.trackLearnerProgressStepFourBody),
     onAdvance: onLearnerAdvance,
     onBack: onLearnerBack,
-  }, {
-    target: `#${TRACK_LEARNER_PROGRESS_TARGETS.MODULE_ACTIVITY}`,
-    placement: 'top',
-    body: intl.formatMessage(messages.trackLearnerProgressStepFiveBody),
-    onBack: onLearnerBack,
-    onAdvance: onLearnerAdvance,
   }, {
     target: `#${TRACK_LEARNER_PROGRESS_TARGETS.FILTER}`,
     placement: 'top',

src/components/ProductTours/AdminOnboardingTours/messages.js

@@ -282,9 +282,9 @@ const messages = defineMessages({
     description: 'Description for the allocate learning budgets invite-only bne flow step four',
   },
   allocateLearningBudgetStepFiveAssignment: {
-    id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.6.assignment',
+    id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.5.assignment',
     defaultMessage: 'Track all budget activity, including pending assignments and enrollment spending.',
-    description: 'Description for the allocate learning budgets assignments flow step six',
+    description: 'Description for the allocate learning budgets assignments flow step five',
   },
   allocateLearningBudgetStepFiveAssignmentZeroState: {
     id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.5.assignment.zeroState',
@@ -309,9 +309,14 @@ const messages = defineMessages({
     description: 'Description for the allocate learning budgets invite only Browse and Enroll flow step six',
   },
   allocateLearningBudgetStepSixAssignment: {
-    id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.7.assignment',
+    id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.6.assignment',
     defaultMessage: 'The Assigned table helps you monitor learner assignments, send reminders, or cancel as needed.',
-    description: 'Description for the allocate learning budgets flow step seven',
+    description: 'Description for the allocate learning budgets flow step six',
+  },
+  allocateLearningBudgetStepSixSpendNoAssignment: {
+    id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.6.spendNoAssignment',
+    defaultMessage: 'Once you assign courses, you can monitor learner assignments, send reminders, or cancel as needed.',
+    description: 'Description for the allocate learning budgets flow step six for customers that have spend but no assignments.',
   },
   allocateLearningBudgetStepSevenAssignment: {
     id: 'adminPortal.productTours.adminOnboarding.allocateLearningBudget.body.8.assignment',

src/components/ProductTours/AdminOnboardingTours/tests/AllocateLearningBudgetsFlow.test.jsx

@@ -196,6 +196,42 @@ describe('useAllocateLearningBudgetsFlow', () => {
       expect(result.current[6].target).toBe('#learner-credit-management-breadcrumbs');
     });
 
+    it('should return learner credit detail page flow when on detail page with spent transactions and no content assignments', () => {
+      useBudgetDetailActivityOverview.mockReturnValue({
+        isLoading: false,
+        isFetching: false,
+        data: {
+          spentTransactions: { count: 1 },
+          contentAssignments: { count: 0 },
+        },
+      });
+
+      const props = {
+        currentStep: 0,
+        enablePortalLearnerCreditManagementScreen: true,
+        enterpriseFeatures: {
+          topDownAssignmentRealTimeLcm: true,
+        },
+        enterpriseId: 'test-enterprise-uuid',
+        enterpriseSlug: 'test-enterprise-slug',
+        handleBackTour: mockHandleBackTour,
+        handleEndTour: mockHandleEndTour,
+        setCurrentStep: mockSetCurrentStep,
+        targetSelector: '',
+      };
+
+      const { result } = renderHookWithProviders(() => useAllocateLearningBudgetsFlow(props));
+
+      expect(result.current).toHaveLength(7);
+      expect(result.current[0].target).toBe('#budget-detail-card');
+      expect(result.current[1].target).toBe('#new-assignment-button');
+      expect(result.current[2].target).toBe('#track-budget-activity');
+      expect(result.current[3].target).toBe('#zero-state-assign-card');
+      expect(result.current[4].target).toBe('#spent-budget-table');
+      expect(result.current[5].target).toBe('#budget-catalog-tab');
+      expect(result.current[6].target).toBe('#learner-credit-management-breadcrumbs');
+    });
+
     it('should return learner credit detail page flow when on detail page with no spent transactions and no content assignments', () => {
       useBudgetDetailActivityOverview.mockReturnValue({
         isLoading: false,

src/components/ProductTours/AdminOnboardingTours/tests/LearnerProgressFlow.test.jsx

@@ -39,7 +39,7 @@ describe('tourFlows', () => {
 
     const flow = result.current;
 
-    expect(flow).toHaveLength(7);
+    expect(flow).toHaveLength(6);
     // can't test equality of onAdvance since it's an anonymous function
     expect(flow[0]).toMatchObject({
       target: `#${TRACK_LEARNER_PROGRESS_TARGETS.LEARNER_PROGRESS_SIDEBAR}`,
@@ -67,18 +67,12 @@ describe('tourFlows', () => {
     });
 
     expect(flow[4]).toMatchObject({
-      target: `#${TRACK_LEARNER_PROGRESS_TARGETS.MODULE_ACTIVITY}`,
-      placement: 'top',
-      body: messages.trackLearnerProgressStepFiveBody.defaultMessage,
-    });
-
-    expect(flow[5]).toMatchObject({
       target: `#${TRACK_LEARNER_PROGRESS_TARGETS.FILTER}`,
       placement: 'top',
       body: messages.trackLearnerProgressStepSixBody.defaultMessage,
     });
 
-    expect(flow[6]).toMatchObject({
+    expect(flow[5]).toMatchObject({
       target: `#${TRACK_LEARNER_PROGRESS_TARGETS.CSV_DOWNLOAD}`,
       placement: 'top',
       body: messages.trackLearnerProgressStepSevenBody.defaultMessage,
@@ -99,7 +93,6 @@ describe('tourFlows', () => {
     expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepTwoBody);
     expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepThreeBody);
     expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepFourBody);
-    expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepFiveBody);
     expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepSixBody);
     expect(mockFormatMessage).toHaveBeenCalledWith(messages.trackLearnerProgressStepSevenBody);
   });

src/components/ProductTours/TourCollapsible.tsx

@@ -72,6 +72,7 @@ const TourCollapsible: FC<Props> = (
   const [onboardingSteps, setOnboardingSteps] = useState<StepDefinition[] | undefined>();
   const [showCompletedModal, setShowCompletedModal] = useState(false);
   const { data: onboardingTourData } = useFetchCompletedOnboardingFlows(adminUuid);
+  const { canManageLearnerCredit } = useContext(EnterpriseSubsidiesContext);
   const { isLoadingCustomerAgreement, customerAgreement } = useContext(EnterpriseSubsidiesContext);
 
   const handleDismiss = () => {
@@ -146,6 +147,8 @@ const TourCollapsible: FC<Props> = (
             && (!isLoadingCustomerAgreement && !isEmpty(customerAgreement?.subscriptions));
         case CUSTOMIZE_REPORTS_TITLE:
           return enableReportingConfigScreen;
+        case ALLOCATE_LEARNING_BUDGET_TITLE:
+          return canManageLearnerCredit;
         default:
           return true;
       }
@@ -166,6 +169,7 @@ const TourCollapsible: FC<Props> = (
     }
     setOnboardingSteps(steps);
   }, [
+    canManageLearnerCredit,
     onboardingTourData?.completedTourFlows,
     onboardingTourData?.onboardingTourCompleted,
     enableReportingConfigScreen,

src/components/ProductTours/tests/TourCollapsible.test.jsx

@@ -70,6 +70,7 @@ const defaultState = {
 
 const defaultEnterpriseSubsidiesContextValue = {
   isLoadingCustomerAgreement: false,
+  canManageLearnerCredit: true,
   customerAgreement: {
     subscriptions: [{ contents: 'unimportant' }],
   },

src/components/learner-credit-management/AssignMoreCoursesEmptyStateMinimal.jsx

@@ -7,6 +7,7 @@ import {
   formatDate, formatPrice, useBudgetId, usePathToCatalogTab, useSubsidyAccessPolicy,
 } from './data';
 import nameYourLearner from './assets/reading.svg';
+import { ALLOCATE_LEARNING_BUDGETS_TARGETS } from '../ProductTours/AdminOnboardingTours/constants';
 
 const AssignMoreCoursesEmptyStateMinimal = () => {
   const { subsidyAccessPolicyId } = useBudgetId();
@@ -21,7 +22,7 @@ const AssignMoreCoursesEmptyStateMinimal = () => {
   const subsidyExpirationDate = subsidyAccessPolicy.subsidyExpirationDatetime;
 
   return (
-    <Card className="assign-more-courses-empty-state-minimal" orientation="horizontal">
+    <Card id={ALLOCATE_LEARNING_BUDGETS_TARGETS.ZERO_STATE_ASSIGN_CARD} className="assign-more-courses-empty-state-minimal" orientation="horizontal">
       <Card.ImageCap
         src={nameYourLearner}
         className="bg-light-300 d-flex justify-content-center py-3"