Skip to content

Commit

Permalink
fix: dynamic button text and subtitle fix (#1243)
Browse files Browse the repository at this point in the history
* fix: dynamic button text

* fix: subtitle changes

* fix: PR requests

* fix: quick fix
  • Loading branch information
kiram15 authored Jun 6, 2024
1 parent 5eae978 commit 8ef903d
Show file tree
Hide file tree
Showing 7 changed files with 97 additions and 18 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const BudgetDetailActivityTabContents = ({ enterpriseUUID, enterpriseFeatures })
&& (
<NoBnEBudgetActivity
openInviteModal={openInviteModal}
isEnterpriseGroupsEnabled={isEnterpriseGroupsEnabled}
/>
)}
{hasSpentTransactions && <BudgetDetailRedemptions />}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ const BudgetDetailRedemptions = ({ enterpriseFeatures, enterpriseUUID }) => {
<p className="small mb-4">
<FormattedMessage
id="lcm.budget.detail.page.spent.description"
defaultMessage="Spent activity is driven by completed enrollments."
defaultMessage="Spent activity is driven by completed enrollments. "
description="Description for the spent section of the budget detail page"
/>
{(enterpriseOfferId || (subsidyAccessPolicyId && !enterpriseFeatures.topDownAssignmentRealTimeLcm)) ? (
Expand Down
21 changes: 16 additions & 5 deletions src/components/learner-credit-management/BudgetStatusSubtitle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ const BudgetStatusSubtitle = ({
}) => {
const { data: enterpriseGroup } = useEnterpriseGroup(policy);
const { data: enterpriseCustomer } = useEnterpriseCustomer(enterpriseUUID);
// universal group = all members of the organization are automatically in a group
const universalGroup = enterpriseGroup?.appliesToAllContexts;
const intl = useIntl();
const budgetType = {
Expand All @@ -40,24 +41,32 @@ const BudgetStatusSubtitle = ({
defaultMessage: 'Assignment',
description: 'Enrollment type for budgets that are assignable',
}),
},
browseAndEnroll: {
enrollmentType:
intl.formatMessage({
id: 'lcm.budget.detail.page.overview.enroll.browse.and.enroll',
defaultMessage: 'Browse & Enroll',
description: 'Enrollment type for budgets that are browsable and enrollable',
}),
popoverText:
intl.formatMessage({
id: 'lcm.budget.detail.page.overview.enroll.assignable.popover',
id: 'lcm.budget.detail.page.overview.enroll.browse.and.enroll.popover',
defaultMessage: 'Available to members added to this budget',
description: 'Popover text for budgets that are assignable',
description: 'Popover text for budgets that are browsable and enrollable',
}),
icon: <Icon size="xs" src={GroupAdd} className="ml-1 d-inline-flex" svgAttrs={{ transform: 'translate(0,2)' }} />,
},
browseAndEnroll: {
orgBrowseAndEnroll: {
enrollmentType:
intl.formatMessage({
id: 'lcm.budget.detail.page.overview.enroll.browse.and.enroll',
id: 'lcm.budget.detail.page.overview.enroll.org.browse.and.enroll',
defaultMessage: 'Browse & Enroll',
description: 'Enrollment type for budgets that are browsable and enrollable',
}),
popoverText:
intl.formatMessage({
id: 'lcm.budget.detail.page.overview.enroll.browse.and.enroll.popover',
id: 'lcm.budget.detail.page.overview.enroll.org.browse.and.enroll.popover',
defaultMessage: 'Available to all people in your organization',
description: 'Popover text for budgets that are browsable and enrollable',
}),
Expand All @@ -68,6 +77,8 @@ const BudgetStatusSubtitle = ({

if (isLmsBudget(enterpriseCustomer?.activeIntegrations.length, universalGroup)) {
budgetTypeToRender = budgetType.lms;
} else if (universalGroup) {
budgetTypeToRender = budgetType.orgBrowseAndEnroll;
} else if (isAssignable) {
budgetTypeToRender = budgetType.assignable;
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@ import {
Button, Card, Col, Row,
} from '@openedx/paragon';
import { Link } from 'react-router-dom';

import { useIsLargeOrGreater } from '../data';
import {
useBudgetId,
useEnterpriseGroupLearners,
useIsLargeOrGreater,
useSubsidyAccessPolicy,
} from '../data';
import nameYourMembers from '../assets/reading.svg';
import memberBrowse from '../assets/phoneScroll.svg';
import enrollAndSpend from '../assets/wallet.svg';
Expand All @@ -23,7 +27,12 @@ const EnrollAndSpendIllustration = (props) => (
<img data-testid="enroll-and-spend-illustration" src={enrollAndSpend} alt="" {...props} />
);

const NoBnEBudgetActivity = ({ openInviteModal, isEnterpriseGroupsEnabled }) => {
const NoBnEBudgetActivity = ({ openInviteModal }) => {
const { subsidyAccessPolicyId } = useBudgetId();
const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
const { data } = useEnterpriseGroupLearners(subsidyAccessPolicy?.groupAssociations[0]);
const groupMembersCount = data?.count || 0;

const isLargeOrGreater = useIsLargeOrGreater();

return (
Expand Down Expand Up @@ -89,7 +98,7 @@ const NoBnEBudgetActivity = ({ openInviteModal, isEnterpriseGroupsEnabled }) =>
as={Link}
onClick={openInviteModal}
>
{isEnterpriseGroupsEnabled ? 'Invite more members' : 'Get started'}
{groupMembersCount > 0 ? 'Invite more members' : 'Get started'}
</Button>
</Col>
</Row>
Expand All @@ -100,11 +109,6 @@ const NoBnEBudgetActivity = ({ openInviteModal, isEnterpriseGroupsEnabled }) =>

NoBnEBudgetActivity.propTypes = {
openInviteModal: PropTypes.func.isRequired,
isEnterpriseGroupsEnabled: PropTypes.bool,
};

NoBnEBudgetActivity.defaultProps = {
isEnterpriseGroupsEnabled: false,
};

export default NoBnEBudgetActivity;
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const InviteModalBudgetCard = ({
const intl = useIntl();
const { subsidyAccessPolicyId, enterpriseOfferId } = useBudgetId();
const { data: subsidyAccessPolicy } = useSubsidyAccessPolicy(subsidyAccessPolicyId);
const { data } = useEnterpriseGroupLearners(subsidyAccessPolicy.groupAssociations[0]);
const { data } = useEnterpriseGroupLearners(subsidyAccessPolicy?.groupAssociations[0]);

const memberSubtitle = data?.count ? `${makePlural(data?.count, 'current member')}` : '';
const budgetType = (enterpriseOfferId !== null) ? BUDGET_TYPES.ecommerce : BUDGET_TYPES.policy;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ import {
useBudgetDetailActivityOverview,
useEnterpriseGroupLearners,
useEnterpriseGroupMembersTableData,
useSubsidySummaryAnalyticsApi,
useEnterpriseOffer,
useEnterpriseRemovedGroupMembers,
useSubsidySummaryAnalyticsApi,
} from '../../data';
import { EnterpriseSubsidiesContext } from '../../../EnterpriseSubsidiesContext';
import {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
useEnterpriseCustomer,
useEnterpriseGroup,
useEnterpriseGroupLearners,
useEnterpriseRemovedGroupMembers,
useEnterpriseOffer,
useIsLargeOrGreater,
useSubsidyAccessPolicy,
Expand Down Expand Up @@ -66,6 +67,7 @@ jest.mock('../data', () => ({
useEnterpriseGroup: jest.fn(),
useEnterpriseGroupLearners: jest.fn(),
useEnterpriseGroupMembersTableData: jest.fn(),
useEnterpriseRemovedGroupMembers: jest.fn(),
useEnterpriseOffer: jest.fn(),
useIsLargeOrGreater: jest.fn().mockReturnValue(true),
useSubsidyAccessPolicy: jest.fn(),
Expand Down Expand Up @@ -453,6 +455,10 @@ describe('<BudgetDetailPage />', () => {
budgetRedemptions: mockEmptyBudgetRedemptions,
fetchBudgetRedemptions: jest.fn(),
});
useEnterpriseRemovedGroupMembers.mockReturnValue({
isRemovedMembersLoading: false,
removedGroupMembersCount: 0,
});
renderWithRouter(<BudgetDetailPageWrapper />);

if (isLoading) {
Expand Down Expand Up @@ -648,12 +654,63 @@ describe('<BudgetDetailPage />', () => {
budgetRedemptions: mockEmptyBudgetRedemptions,
fetchBudgetRedemptions: jest.fn(),
});
useEnterpriseRemovedGroupMembers.mockReturnValue({
isRemovedMembersLoading: false,
removedGroupMembersCount: 0,
});
renderWithRouter(<BudgetDetailPageWrapper />);

// 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('still render bne zero state if there are members but no spend', async () => {
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: 1,
currentPage: 1,
next: null,
numPages: 1,
results: {
enterpriseGroupMembershipUuid: 'cde2e374-032f-4c08-8c0d-bf3205fa7c7e',
learnerId: 4382,
memberDetails: { userEmail: '[email protected]', userName: 'ayy lmao' },
},
},
});
useEnterpriseRemovedGroupMembers.mockReturnValue({
isRemovedMembersLoading: false,
removedGroupMembersCount: 0,
});
useBudgetDetailActivityOverview.mockReturnValue({
isLoading: false,
data: mockEmptyStateBudgetDetailActivityOverview,
});
useBudgetRedemptions.mockReturnValue({
isLoading: false,
budgetRedemptions: mockEmptyBudgetRedemptions,
fetchBudgetRedemptions: jest.fn(),
});
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();
});

Expand Down Expand Up @@ -1548,6 +1605,10 @@ describe('<BudgetDetailPage />', () => {
budgetRedemptions: mockEmptyBudgetRedemptions,
fetchBudgetRedemptions: jest.fn(),
});
useEnterpriseRemovedGroupMembers.mockReturnValue({
isRemovedMembersLoading: false,
removedGroupMembersCount: 0,
});
renderWithRouter(<BudgetDetailPageWrapper />);

// Catalog tab does NOT exist
Expand Down Expand Up @@ -2228,6 +2289,10 @@ describe('<BudgetDetailPage />', () => {
},
},
});
useEnterpriseRemovedGroupMembers.mockReturnValue({
isRemovedMembersLoading: false,
removedGroupMembersCount: 0,
});
renderWithRouter(
<BudgetDetailPageWrapper
initialState={initialState}
Expand Down

0 comments on commit 8ef903d

Please sign in to comment.