fix: zero state card and invite modal (#1249)

* fix: zero state card and invite modal
openedx · Jun 7, 2024 · e9b406f · e9b406f
1 parent 8ef903d
commit e9b406f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 5 deletions.
diff --git a/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx b/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx
@@ -11,7 +11,7 @@ import { useBudgetDetailActivityOverview, useBudgetId, useSubsidyAccessPolicy }
 import NoAssignableBudgetActivity from './empty-state/NoAssignableBudgetActivity';
 import NoBnEBudgetActivity from './empty-state/NoBnEBudgetActivity';
 
-const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures }) => {
+const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures, appliesToAllContexts }) => {
   const isTopDownAssignmentEnabled = enterpriseFeatures.topDownAssignmentRealTimeLcm;
   const { enterpriseOfferId, subsidyAccessPolicyId } = useBudgetId();
   const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
@@ -46,6 +46,12 @@ const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures })
 
   if (!isTopDownAssignmentEnabled || !subsidyAccessPolicy?.isAssignable) {
     if (isEnterpriseGroupsEnabled) {
+      if (appliesToAllContexts) {
+        return (
+          <BudgetDetailRedemptions />
+        );
+      }
+
       return (
         <>
           {renderBnEActivity
@@ -95,6 +101,7 @@ BudgetDetailActivityTabContents.propTypes = {
     topDownAssignmentRealTimeLcm: PropTypes.bool,
     enterpriseGroupsV1: PropTypes.bool,
   }).isRequired,
+  appliesToAllContexts: PropTypes.bool.isRequired,
 };
 
 export default connect(mapStateToProps)(BudgetDetailActivityTabContents);
diff --git a/src/components/learner-credit-management/data/hooks/useBudgetDetailTabs.jsx b/src/components/learner-credit-management/data/hooks/useBudgetDetailTabs.jsx
@@ -41,7 +41,7 @@ export const useBudgetDetailTabs = ({
         className={TAB_CLASS_NAME}
       >
         {activeTabKey === BUDGET_DETAIL_ACTIVITY_TAB && (
-          <ActivityTabElement />
+          <ActivityTabElement appliesToAllContexts={appliesToAllContexts} />
         )}
       </Tab>,
     );

diff --git a/src/components/learner-credit-management/invite-modal/InviteModalSummaryLearnerList.jsx b/src/components/learner-credit-management/invite-modal/InviteModalSummaryLearnerList.jsx
@@ -12,7 +12,7 @@ const InviteModalSummaryLearnerList = ({
   learnerEmails,
 }) => {
   const [isTruncated, setIsTruncated] = useState(hasLearnerEmailsSummaryListTruncation(learnerEmails));
-  const truncatedLearnerEmails = learnerEmails.slice(0, MAX_INITIAL_LEARNER_EMAILS_DISPLAYED_COUNT - 1);
+  const truncatedLearnerEmails = learnerEmails.slice(0, MAX_INITIAL_LEARNER_EMAILS_DISPLAYED_COUNT);
   const displayedLearnerEmails = isTruncated ? truncatedLearnerEmails : learnerEmails;
 
   useEffect(() => {

diff --git a/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx b/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx
@@ -645,6 +645,11 @@ describe('<BudgetDetailPage />', () => {
         results: [],
       },
     });
+    useEnterpriseGroup.mockReturnValue({
+      data: {
+        appliesToAllContexts: false,
+      },
+    });
     useBudgetDetailActivityOverview.mockReturnValue({
       isLoading: false,
       data: mockEmptyStateBudgetDetailActivityOverview,
@@ -704,16 +709,71 @@ describe('<BudgetDetailPage />', () => {
       budgetRedemptions: mockEmptyBudgetRedemptions,
       fetchBudgetRedemptions: jest.fn(),
     });
+    useEnterpriseGroup.mockReturnValue({
+      data: {
+        appliesToAllContexts: false,
+      },
+    });
     renderWithRouter(<BudgetDetailPageWrapper />);
 
     // Overview empty state (no content assignments, no spent transactions)
-    screen.debug(undefined, 1000000);
-
     expect(screen.queryByText('No budget activity yet? Invite members to browse the catalog and enroll!')).toBeInTheDocument();
 
     expect(screen.getByText('Invite more members', { selector: 'a' })).toBeInTheDocument();
   });
 
+  it('does not display bnr budget activity overview empty state and displays empty spent table', async () => {
+    useIsLargeOrGreater.mockReturnValue(true);
+    useParams.mockReturnValue({
+      enterpriseSlug: 'test-enterprise-slug',
+      enterpriseAppPage: 'test-enterprise-page',
+      budgetId: 'a52e6548-649f-4576-b73f-c5c2bee25e9c',
+      activeTabKey: 'activity',
+    });
+    useSubsidyAccessPolicy.mockReturnValue({
+      isInitialLoading: false,
+      data: mockPerLearnerSpendLimitSubsidyAccessPolicy,
+    });
+    useEnterpriseGroupLearners.mockReturnValue({
+      data: {
+        count: 0,
+        currentPage: 1,
+        next: null,
+        numPages: 1,
+        results: [],
+      },
+    });
+    useEnterpriseGroup.mockReturnValue({
+      data: {
+        appliesToAllContexts: true,
+      },
+    });
+    useBudgetDetailActivityOverview.mockReturnValue({
+      isLoading: false,
+      data: mockEmptyStateBudgetDetailActivityOverview,
+    });
+    useBudgetRedemptions.mockReturnValue({
+      isLoading: false,
+      budgetRedemptions: mockEmptyBudgetRedemptions,
+      fetchBudgetRedemptions: jest.fn(),
+    });
+    const storeState = {
+      ...initialStoreState,
+      portalConfiguration: {
+        ...initialStoreState.portalConfiguration,
+        enterpriseFeatures: {
+          ...initialStoreState.portalConfiguration.enterpriseFeatures,
+          topDownAssignmentRealTimeLcm: false,
+        },
+      },
+    };
+    renderWithRouter(<BudgetDetailPageWrapper initialState={storeState} />);
+
+    // Display spent table when there is no spent activity but appliesToAllContext is true
+    expect(screen.getByText('Search by enrollment details')).toBeInTheDocument();
+    expect(screen.queryByText('Invite more members', { selector: 'a' })).not.toBeInTheDocument();
+  });
+
   it.each([
     {
       budgetId: mockEnterpriseOfferId,