From e0ce334d6eb179ba5e97e8b4f6554447aab4f3e5 Mon Sep 17 00:00:00 2001 From: Adam Stankiewicz Date: Thu, 7 Mar 2024 17:46:21 -0500 Subject: [PATCH] Revert "feat: create zero state for bnr (#1179)" This reverts commit 09da1fff1ea056b1527b564be044b0ebbf9d2f10. --- .../AssignMoreCoursesEmptyStateMinimal.jsx | 2 +- .../BudgetDetailActivityTabContents.jsx | 20 ++-- ...ity.jsx => NoBudgetActivityEmptyState.jsx} | 10 +- .../assets/{wallet.svg => confirmSpend.svg} | 0 ...phoneScroll.svg => findTheRightCourse.svg} | 0 .../{reading.svg => nameYourLearners.svg} | 0 .../empty-state/NoBnEBudgetActivity.jsx | 99 ------------------- .../tests/BudgetDetailPage.test.jsx | 35 +------ 8 files changed, 15 insertions(+), 151 deletions(-) rename src/components/learner-credit-management/{empty-state/NoAssignableBudgetActivity.jsx => NoBudgetActivityEmptyState.jsx} (92%) rename src/components/learner-credit-management/assets/{wallet.svg => confirmSpend.svg} (100%) rename src/components/learner-credit-management/assets/{phoneScroll.svg => findTheRightCourse.svg} (100%) rename src/components/learner-credit-management/assets/{reading.svg => nameYourLearners.svg} (100%) delete mode 100644 src/components/learner-credit-management/empty-state/NoBnEBudgetActivity.jsx diff --git a/src/components/learner-credit-management/AssignMoreCoursesEmptyStateMinimal.jsx b/src/components/learner-credit-management/AssignMoreCoursesEmptyStateMinimal.jsx index 25d1a02a6b..d51595c5e9 100644 --- a/src/components/learner-credit-management/AssignMoreCoursesEmptyStateMinimal.jsx +++ b/src/components/learner-credit-management/AssignMoreCoursesEmptyStateMinimal.jsx @@ -5,7 +5,7 @@ import { Button, Card } from '@edx/paragon'; import { formatDate, formatPrice, useBudgetId, usePathToCatalogTab, useSubsidyAccessPolicy, } from './data'; -import nameYourLearner from './assets/reading.svg'; +import nameYourLearner from './assets/nameYourLearners.svg'; const AssignMoreCoursesEmptyStateMinimal = () => { const { subsidyAccessPolicyId } = useBudgetId(); diff --git a/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx b/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx index 9720c607a9..21e65d2de1 100644 --- a/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx +++ b/src/components/learner-credit-management/BudgetDetailActivityTabContents.jsx @@ -6,8 +6,7 @@ import { Stack, Skeleton } from '@edx/paragon'; import BudgetDetailRedemptions from './BudgetDetailRedemptions'; import BudgetDetailAssignments from './BudgetDetailAssignments'; import { useBudgetDetailActivityOverview, useBudgetId, useSubsidyAccessPolicy } from './data'; -import NoAssignableBudgetActivity from './empty-state/NoAssignableBudgetActivity'; -import NoBnEBudgetActivity from './empty-state/NoBnEBudgetActivity'; +import NoBudgetActivityEmptyState from './NoBudgetActivityEmptyState'; const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures }) => { const isTopDownAssignmentEnabled = enterpriseFeatures.topDownAssignmentRealTimeLcm; @@ -33,22 +32,19 @@ const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures }) ); } - const hasSpentTransactions = budgetActivityOverview.spentTransactions?.count > 0; - const hasContentAssignments = budgetActivityOverview.contentAssignments?.count > 0; - if (!isTopDownAssignmentEnabled || !subsidyAccessPolicy?.isAssignable) { - return ( - <> - {!hasSpentTransactions && ()} - - - ); + return ; } + const hasContentAssignments = !!budgetActivityOverview.contentAssignments?.count > 0; + const hasSpentTransactions = !!budgetActivityOverview.spentTransactions?.count > 0; + // If there is no activity whatsoever (no assignments, no spent transactions), show the // full empty state. if (!hasContentAssignments && !hasSpentTransactions) { - return ; + return ( + + ); } // Otherwise, render the contents of the "Activity" tab. diff --git a/src/components/learner-credit-management/empty-state/NoAssignableBudgetActivity.jsx b/src/components/learner-credit-management/NoBudgetActivityEmptyState.jsx similarity index 92% rename from src/components/learner-credit-management/empty-state/NoAssignableBudgetActivity.jsx rename to src/components/learner-credit-management/NoBudgetActivityEmptyState.jsx index a59c245f88..53559092e1 100644 --- a/src/components/learner-credit-management/empty-state/NoAssignableBudgetActivity.jsx +++ b/src/components/learner-credit-management/NoBudgetActivityEmptyState.jsx @@ -8,11 +8,11 @@ import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils'; import { Link } from 'react-router-dom'; import { connect } from 'react-redux'; -import { useIsLargeOrGreater, usePathToCatalogTab } from '../data'; -import findTheRightCourse from '../assets/phoneScroll.svg'; -import nameYourLearners from '../assets/reading.svg'; -import confirmSpend from '../assets/wallet.svg'; -import EVENT_NAMES from '../../../eventTracking'; +import { useIsLargeOrGreater, usePathToCatalogTab } from './data'; +import nameYourLearners from './assets/nameYourLearners.svg'; +import findTheRightCourse from './assets/findTheRightCourse.svg'; +import confirmSpend from './assets/confirmSpend.svg'; +import EVENT_NAMES from '../../eventTracking'; const FindTheRightCourseIllustration = (props) => ( diff --git a/src/components/learner-credit-management/assets/wallet.svg b/src/components/learner-credit-management/assets/confirmSpend.svg similarity index 100% rename from src/components/learner-credit-management/assets/wallet.svg rename to src/components/learner-credit-management/assets/confirmSpend.svg diff --git a/src/components/learner-credit-management/assets/phoneScroll.svg b/src/components/learner-credit-management/assets/findTheRightCourse.svg similarity index 100% rename from src/components/learner-credit-management/assets/phoneScroll.svg rename to src/components/learner-credit-management/assets/findTheRightCourse.svg diff --git a/src/components/learner-credit-management/assets/reading.svg b/src/components/learner-credit-management/assets/nameYourLearners.svg similarity index 100% rename from src/components/learner-credit-management/assets/reading.svg rename to src/components/learner-credit-management/assets/nameYourLearners.svg diff --git a/src/components/learner-credit-management/empty-state/NoBnEBudgetActivity.jsx b/src/components/learner-credit-management/empty-state/NoBnEBudgetActivity.jsx deleted file mode 100644 index ecfd3f3c06..0000000000 --- a/src/components/learner-credit-management/empty-state/NoBnEBudgetActivity.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { - Button, Card, Row, Col, -} from '@edx/paragon'; -import { Link } from 'react-router-dom'; - -import { useIsLargeOrGreater } from '../data'; -import nameYourMembers from '../assets/reading.svg'; -import memberBrowse from '../assets/phoneScroll.svg'; -import enrollAndSpend from '../assets/wallet.svg'; - -const NameYourMembersIllustration = (props) => ( - -); - -const MemberBrowseIllustration = (props) => ( - -); - -const EnrollAndSpendIllustration = (props) => ( - -); - -const NoBnEBudgetActivity = () => { - const isLargeOrGreater = useIsLargeOrGreater(); - - return ( - - -

- No budget activity yet? Invite members to browse the catalog and enroll! -

- {isLargeOrGreater && ( - - - - - - - - - - - - )} - - - - - {!isLargeOrGreater && } -

- 01 - Name your members -

- - Upload or enter email addresses to invite people to browse and enroll - using this budget. - - - - {!isLargeOrGreater && } -

- 02 - Members find the right course -

- - Members can then browse the catalog associated with this budget and - find a course that aligns with their interests. - - - - {!isLargeOrGreater && } -

- 03 - Members can enroll and spend -

- - Members can enroll in courses, subject to any limits in this budget's - settings. The deducted costs from this budget will be visible right here - in your budget activity! - - - - - - - - - - - ); -}; - -export default NoBnEBudgetActivity; diff --git a/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx b/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx index 07423a77d2..f05394b572 100644 --- a/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx +++ b/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx @@ -445,7 +445,7 @@ describe('', () => { it.each([ { isLargeViewport: true }, { isLargeViewport: false }, - ])('displays assignable budget activity overview empty state', async ({ isLargeViewport }) => { + ])('displays budget activity overview empty state', async ({ isLargeViewport }) => { useIsLargeOrGreater.mockReturnValue(isLargeViewport); useParams.mockReturnValue({ enterpriseSlug: 'test-enterprise-slug', @@ -472,39 +472,6 @@ describe('', () => { await waitFor(() => expect(sendEnterpriseTrackEvent).toHaveBeenCalledTimes(1)); }); - it.each([ - { isLargeViewport: true }, - { isLargeViewport: false }, - ])('displays bnr budget activity overview empty state', async ({ isLargeViewport }) => { - useIsLargeOrGreater.mockReturnValue(isLargeViewport); - useParams.mockReturnValue({ - enterpriseSlug: 'test-enterprise-slug', - enterpriseAppPage: 'test-enterprise-page', - budgetId: 'a52e6548-649f-4576-b73f-c5c2bee25e9c', - activeTabKey: 'activity', - }); - useSubsidyAccessPolicy.mockReturnValue({ - isInitialLoading: false, - data: mockPerLearnerSpendLimitSubsidyAccessPolicy, - }); - useBudgetDetailActivityOverview.mockReturnValue({ - isLoading: false, - data: mockEmptyStateBudgetDetailActivityOverview, - }); - useBudgetRedemptions.mockReturnValue({ - isLoading: false, - budgetRedemptions: mockEmptyBudgetRedemptions, - fetchBudgetRedemptions: jest.fn(), - }); - renderWithRouter(); - - // Overview empty state (no content assignments, no spent transactions) - expect(screen.getByText('No budget activity yet? Invite members to browse the catalog and enroll!')).toBeInTheDocument(); - const illustrationTestIds = ['name-your-members-illustration', 'members-browse-illustration', 'enroll-and-spend-illustration']; - illustrationTestIds.forEach(testId => expect(screen.getByTestId(testId)).toBeInTheDocument()); - expect(screen.getByText('Get started', { selector: 'a' })).toBeInTheDocument(); - }); - it.each([ { budgetId: mockEnterpriseOfferId,