diff --git a/src/components/EnterpriseApp/data/constants.js b/src/components/EnterpriseApp/data/constants.js index 6feaac51f7..1773fd73e2 100644 --- a/src/components/EnterpriseApp/data/constants.js +++ b/src/components/EnterpriseApp/data/constants.js @@ -17,7 +17,7 @@ export const ROUTE_NAMES = { export const BUDGET_STATUSES = { active: 'Active', expired: 'Expired', - upcoming: 'Upcoming', + scheduled: 'Scheduled', }; export const BUDGET_TYPES = { diff --git a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx index db6f178f2a..44407531c0 100644 --- a/src/components/learner-credit-management/MultipleBudgetsPicker.jsx +++ b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx @@ -7,36 +7,40 @@ import { } from '@edx/paragon'; import BudgetCard from './BudgetCard-V2'; +import { orderOffers } from './data/utils'; const MultipleBudgetsPicker = ({ offers, enterpriseUUID, enterpriseSlug, enableLearnerPortal, -}) => ( - - -

Budgets

-
- - - - {offers.map(offer => ( - - ))} - - - -
-); +}) => { + const orderedOffers = orderOffers(offers); + return ( + + +

Budgets

+
+ + + + {orderedOffers?.map(offer => ( + + ))} + + + +
+ ); +}; MultipleBudgetsPicker.propTypes = { offers: PropTypes.arrayOf(PropTypes.shape()).isRequired, diff --git a/src/components/learner-credit-management/SubBudgetCard.jsx b/src/components/learner-credit-management/SubBudgetCard.jsx index d3360cea43..3841aebea3 100644 --- a/src/components/learner-credit-management/SubBudgetCard.jsx +++ b/src/components/learner-credit-management/SubBudgetCard.jsx @@ -6,6 +6,8 @@ import { Button, Row, Col, + Badge, + Stack, } from '@edx/paragon'; import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants'; @@ -21,9 +23,8 @@ const SubBudgetCard = ({ enterpriseSlug, isLoading, }) => { - const formattedStartDate = dayjs(start).format('MMMM D, YYYY'); - const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY'); - const budgetStatus = getBudgetStatus(start, end); + const budgetLabel = getBudgetStatus(start, end); + const formattedDate = dayjs(budgetLabel?.date).format('MMMM D, YYYY'); const renderActions = (budgetId) => (