diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
new file mode 100644
index 0000000000..16132bf012
--- /dev/null
+++ b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -0,0 +1,163 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import {
+ Card,
+ Button,
+ Stack,
+ Row,
+ Col,
+ Breadcrumb,
+} from '@edx/paragon';
+
+import { useOfferRedemptions, useOfferSummary } from './data/hooks';
+import LearnerCreditAggregateCards from './LearnerCreditAggregateCards';
+import LearnerCreditAllocationTable from './LearnerCreditAllocationTable';
+import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+
+const BudgetCard = ({
+ offer,
+ enterpriseUUID,
+ enterpriseSlug,
+}) => {
+ const {
+ start,
+ end,
+ } = offer;
+
+ const {
+ isLoading: isLoadingOfferSummary,
+ offerSummary,
+ } = useOfferSummary(enterpriseUUID, offer);
+
+ const {
+ isLoading: isLoadingOfferRedemptions,
+ offerRedemptions,
+ fetchOfferRedemptions,
+ } = useOfferRedemptions(enterpriseUUID, offer?.id);
+ const [detailPage, setDetailPage] = useState(false);
+ const [activeLabel, setActiveLabel] = useState('');
+ const links = [
+ { label: 'Budgets', url: `/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}` },
+ ];
+ const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+ const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+ const navigateToBudgetRedemptions = (budgetType) => {
+ setDetailPage(true);
+ links.push({ label: budgetType, url: `/${enterpriseSlug}/admin/learner-credit` });
+ setActiveLabel(budgetType);
+ };
+
+ const renderActions = (budgetType) => (
+
+ );
+
+ const renderCardHeader = (budgetType) => {
+ const subtitle = (
+
+
+ {formattedStartDate} - {formattedExpirationDate}
+
+
+ );
+
+ return (
+
+ {renderActions(budgetType)}
+
+ )}
+ />
+ );
+ };
+
+ const renderCardSection = (available, spent) => (
+
+
+
+ Available
+ {available}
+
+
+ Spent
+ {spent}
+
+
+
+ );
+
+ const renderCardAggregate = () => (
+
+
+
+ );
+
+ return (
+
+
+
+
+
+
+ {!detailPage
+ ? (
+ <>
+ {renderCardAggregate()}
+ Budgets
+
+
+
+ {renderCardHeader('Overview')}
+ {renderCardSection(offerSummary?.remainingFunds, offerSummary?.redeemedFunds)}
+
+
+
+ >
+ )
+ : (
+
+ )}
+
+ );
+};
+
+BudgetCard.propTypes = {
+ offer: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ start: PropTypes.string.isRequired,
+ end: PropTypes.string.isRequired,
+ }).isRequired,
+ enterpriseUUID: PropTypes.string.isRequired,
+ enterpriseSlug: PropTypes.string.isRequired,
+};
+
+export default BudgetCard;
diff --git a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
index e463487937..e5eceb7766 100644
--- a/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
+++ b/src/components/learner-credit-management/LearnerCreditAllocationTable.jsx
@@ -17,10 +17,9 @@ const LearnerCreditAllocationTable = ({
tableData,
fetchTableData,
enterpriseUUID,
- budgetType,
}) => {
const isDesktopTable = useMediaQuery({ minWidth: breakpoints.extraLarge.minWidth });
- const defaultFilter = budgetType ? [{ id: 'courseProductLine', value: budgetType }] : [];
+ const defaultFilter = [];
return (
);
};
-LearnerCreditAllocationTable.defaultProps = {
- budgetType: null,
-};
LearnerCreditAllocationTable.propTypes = {
enterpriseUUID: PropTypes.string.isRequired,
@@ -109,7 +105,6 @@ LearnerCreditAllocationTable.propTypes = {
pageCount: PropTypes.number.isRequired,
}).isRequired,
fetchTableData: PropTypes.func.isRequired,
- budgetType: PropTypes.string,
};
export default LearnerCreditAllocationTable;
diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
index a7b4bc814e..8535bd1d21 100644
--- a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
+++ b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -6,7 +6,7 @@ import {
Col,
} from '@edx/paragon';
-import BudgetCard from './BudgetCard';
+import BudgetCard from './BudgetCard-V2';
const MultipleBudgetsPicker = ({
offers,
diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
index 49350821d1..cfc91ded7c 100644
--- a/src/components/learner-credit-management/tests/BudgetCard.test.jsx
+++ b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -13,7 +13,7 @@ import {
import '@testing-library/jest-dom/extend-expect';
import { IntlProvider } from '@edx/frontend-platform/i18n';
-import BudgetCard from '../BudgetCard';
+import BudgetCard from '../BudgetCard-V2';
import { useOfferSummary, useOfferRedemptions } from '../data/hooks';
import { EXEC_ED_OFFER_TYPE } from '../data/constants';
@@ -69,45 +69,7 @@ describe('', () => {
jest.clearAllMocks();
});
- it('displays correctly for all offers', () => {
- const mockOffer = {
- id: mockEnterpriseOfferId,
- name: mockOfferDisplayName,
- start: '2022-01-01',
- end: '2023-01-01',
- };
- const mockOfferRedemption = {
- created: '2022-02-01',
- enterpriseEnrollmentId: mockEnterpriseOfferEnrollmentId,
- };
- useOfferSummary.mockReturnValue({
- isLoading: false,
- offerSummary: mockOfferSummary,
- });
- useOfferRedemptions.mockReturnValue({
- isLoading: false,
- offerRedemptions: {
- results: [mockOfferRedemption],
- itemCount: 1,
- pageCount: 1,
- },
- fetchOfferRedemptions: jest.fn(),
- });
- render();
- expect(screen.getByText('Open Courses Marketplace'));
- expect(screen.getByText('Executive Education'));
- expect(screen.getByText(`$${mockOfferSummary.redeemedFunds.toLocaleString()}`));
- const formattedString = `${dayjs(mockOffer.start).format('MMMM D, YYYY')} - ${dayjs(mockOffer.end).format('MMMM D, YYYY')}`;
- const elementsWithTestId = screen.getAllByTestId('offer-date');
- const firstElementWithTestId = elementsWithTestId[0];
- expect(firstElementWithTestId).toHaveTextContent(formattedString);
- });
-
- it('displays correctly for Offer type Site', () => {
+ it('displays correctly for Offers', () => {
const mockOffer = {
id: mockEnterpriseOfferId,
name: mockOfferDisplayName,
@@ -142,7 +104,7 @@ describe('', () => {
enterpriseUUID={enterpriseUUID}
enterpriseSlug={enterpriseId}
/>);
- expect(screen.getByText('Open Courses Marketplace'));
+ expect(screen.getByText('Overview'));
expect(screen.queryByText('Executive Education')).not.toBeInTheDocument();
expect(screen.getByText(`$${mockOfferSummary.redeemedFunds.toLocaleString()}`));
const formattedString = `${dayjs(mockOffer.start).format('MMMM D, YYYY')} - ${dayjs(mockOffer.end).format('MMMM D, YYYY')}`;