- {isLoadingOfferSummary ? (
-
- ) : offerType === OFFER_TYPES.ecommerce ? (
-
- ) : (
- offerSummary?.budgetsSummary.map((budget) => (
+
+ {!isLoadingOfferSummary
+ && (offerType === BUDGET_TYPES.ecommerce ? (
- ))
- )}
+ ) : (
+ offerSummary?.budgetsSummary.map((budget) => (
+
+ ))
+ ))}
);
};
diff --git a/src/components/learner-credit-management/BudgetDetailPage.jsx b/src/components/learner-credit-management/BudgetDetailPage.jsx
index 88a184c27f..ad90b5ae89 100644
--- a/src/components/learner-credit-management/BudgetDetailPage.jsx
+++ b/src/components/learner-credit-management/BudgetDetailPage.jsx
@@ -4,6 +4,7 @@ import {
Row,
Col,
Breadcrumb,
+ Container,
} from '@edx/paragon';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
@@ -18,7 +19,7 @@ import { useOfferRedemptions } from './data/hooks';
import { isUUID } from './data/utils';
import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
-const PAGE_TITLE = 'Learner Credit Budget Detail';
+const PAGE_TITLE = 'Learner Credit Management';
const BudgetDetailPage = ({
enterpriseUUID,
@@ -45,24 +46,26 @@ const BudgetDetailPage = ({
<>
-
-
-
-
-
-
+
+
+
+
+
+
+
+
>
);
};
diff --git a/src/components/learner-credit-management/Budgetcard-V3.jsx b/src/components/learner-credit-management/Budgetcard-V3.jsx
deleted file mode 100644
index 9d901beea2..0000000000
--- a/src/components/learner-credit-management/Budgetcard-V3.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable */
-import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
-import {
- Card,
- Button,
- Stack,
- Row,
- Col,
-} from '@edx/paragon';
-
-import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants';
-import { getBudgetStatus } from './data/utils';
-
-const SubBudgetCard = ({
- id,
- start,
- end,
- available,
- spent,
- displayName,
- enterpriseSlug,
-}) => {
- const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
- const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
- const budgetStatus = getBudgetStatus(start, end);
-
- const renderActions = (id) => (
-
- );
-
- const renderCardHeader = (budgetType, id) => {
- const subtitle = (
-
-
- {formattedStartDate} - {formattedExpirationDate}
-
-
- );
-
- return (
-
- {budgetStatus !== BUDGET_STATUSES.upcoming && renderActions(id)}
-
- )}
- />
- );
- };
-
- const renderCardSection = (available, spent) => (
-
-
-
- Available
- {available}
-
-
- Spent
- {spent}
-
-
-
- );
-
- return (
-
-
- {renderCardHeader(displayName || 'Overview', id)}
- {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
-
-
- );
-};
-
-SubBudgetCard.propTypes = {
- enterpriseSlug: PropTypes.string.isRequired,
- id: PropTypes.string,
- start: PropTypes.string,
- end: PropTypes.string,
- spent: PropTypes.number,
- available: PropTypes.number,
- displayName: PropTypes.string,
-};
-
-export default SubBudgetCard;
diff --git a/src/components/learner-credit-management/MultipleBudgetsPage.jsx b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
index 3df18c465a..fe12ab2719 100644
--- a/src/components/learner-credit-management/MultipleBudgetsPage.jsx
+++ b/src/components/learner-credit-management/MultipleBudgetsPage.jsx
@@ -6,6 +6,7 @@ import {
Col,
Card,
Hyperlink,
+ Container,
} from '@edx/paragon';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
@@ -17,7 +18,7 @@ import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
import { configuration } from '../../config';
-const PAGE_TITLE = 'Learner Credit';
+const PAGE_TITLE = 'Learner Credit Management';
const MultipleBudgetsPage = ({
enterpriseUUID,
@@ -63,12 +64,14 @@ const MultipleBudgetsPage = ({
<>
-
+
+
+
>
);
};
diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
index e9c672a24c..e064e5174f 100644
--- a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
+++ b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -16,10 +16,10 @@ const MultipleBudgetsPicker = ({
}) => (
-
+
Budgets
-
+
{offers.map(offer => (
{
+ const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+ const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+ const budgetStatus = getBudgetStatus(start, end);
+
+ const renderActions = (budgetId) => (
+
+ );
+
+ const renderCardHeader = (budgetType, budgetId) => {
+ const subtitle = (
+
+
+ {formattedStartDate} - {formattedExpirationDate}
+
+
+ );
+
+ return (
+
+ );
+ };
+
+ const renderCardSection = (availableBalance, spentBalance) => (
+
+
+
+ Available
+ {formatPrice(availableBalance)}
+
+
+ Spent
+ {formatPrice(spentBalance)}
+
+
+
+ );
+
+ return (
+
+
+ {renderCardHeader(displayName || 'Overview', id)}
+ {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
+
+
+ );
+};
+
+SubBudgetCard.propTypes = {
+ enterpriseSlug: PropTypes.string.isRequired,
+ id: PropTypes.string,
+ start: PropTypes.string,
+ end: PropTypes.string,
+ spent: PropTypes.number,
+ isLoading: PropTypes.bool,
+ available: PropTypes.number,
+ displayName: PropTypes.string,
+};
+
+export default SubBudgetCard;
diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js
index 15d3eae2a2..47d17e7994 100644
--- a/src/components/learner-credit-management/data/utils.js
+++ b/src/components/learner-credit-management/data/utils.js
@@ -127,3 +127,11 @@ export const getBudgetStatus = (startDateStr, endDateStr) => {
}
return BUDGET_STATUSES.expired;
};
+
+export const formatPrice = (price) => {
+ const USDollar = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ });
+ return USDollar.format(price);
+};
diff --git a/src/components/learner-credit-management/tests/BudgetCard.test.jsx b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
index 0bffaaf5e6..d8aa511a4a 100644
--- a/src/components/learner-credit-management/tests/BudgetCard.test.jsx
+++ b/src/components/learner-credit-management/tests/BudgetCard.test.jsx
@@ -14,7 +14,7 @@ import '@testing-library/jest-dom/extend-expect';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import BudgetCard from '../BudgetCard-V2';
import { useOfferSummary, useOfferRedemptions } from '../data/hooks';
-import { OFFER_TYPES } from '../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../EnterpriseApp/data/constants';
jest.mock('../data/hooks');
useOfferSummary.mockReturnValue({
@@ -122,7 +122,7 @@ describe('', () => {
name: mockOfferDisplayName,
start: '2022-01-01',
end: '2023-01-01',
- offerType: OFFER_TYPES.ecommerce,
+ offerType: BUDGET_TYPES.ecommerce,
};
const mockOfferRedemption = {
created: '2022-02-01',