feat: ENT-7309 Added budget category based page for learner credit

src/components/learner-credit-management/BudgetCard.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Link } from 'react-router-dom';
+import {
+  Card,
+  Button,
+  Stack,
+  Row,
+  Col,
+} from '@edx/paragon';
+
+import classNames from 'classnames';
+import { useOfferSummary } from './data/hooks';
+
+const BudgetCard = ({
+  offer,
+  enterpriseUUID,
+  createActions,
+}) => {
+  const {
+    name,
+    start,
+    end,
+  } = offer;
+
+  const {
+    isLoading: isLoadingOfferSummary,
+    offerSummary,
+  } = useOfferSummary(enterpriseUUID, offer);
+
+  const formattedStartDate = moment(start).format('MMMM D, YYYY');
+  const formattedExpirationDate = moment(end).format('MMMM D, YYYY');
+
+  const renderActions = () => {
+    const actions = createActions?.(offer) || [];
+
+    if (actions.length === 0) {
+      return null;
+    }
+
+    return actions.map(action => (
+      <Button
+        key={action.to}
+        variant={action.variant}
+        as={Link}
+        to={action.to}
+      >
+        {action.buttonText}
+      </Button>
+    ));
+  };
+
+  const renderCardHeader = () => {
+    const subtitle = (
+      <div className="d-flex flex-wrap align-items-center">
+          <span>
+            {formattedStartDate} - {formattedExpirationDate}
+          </span>
+      </div>
+    );
+
+    return (
+      <Card.Header
+        title={name}
+        subtitle={subtitle}
+        actions={(
+          <div>
+            {renderActions()}
+          </div>
+        )}
+      />
+    );
+  };
+
+  const renderCardSection = () => {
+
+    return (
+      <Card.Section
+        title="Balance"
+        muted
+      >
+        <Row className="d-flex flex-row justify-content-between w-md-75">
+            <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+              <span className="small">Available</span>
+              <span>{offerSummary?.remainingFunds}</span>
+            </Col>
+            <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+              <span className="small">Spent</span>
+              <span>{offerSummary?.redeemedFunds}</span>
+            </Col>
+        </Row>
+      </Card.Section>
+    );
+  };
+
+  return (
+    <Card
+      orientation="horizontal"
+      className={classNames('budget-card', className)}
+    >
+      <Card.Body>
+        <Stack gap={4}>
+          {renderCardHeader()}
+          {renderCardSection()}
+        </Stack>
+      </Card.Body>
+    </Card>
+  );
+};
+
+BudgetCard.defaultProps = {
+  createActions: null,
+};
+
+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,
+  createActions: PropTypes.func,
+};
+
+export default BudgetCard;

src/components/learner-credit-management/MultipleBudgetsPage.jsx

@@ -0,0 +1,76 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Row,
+  Col,
+  Card,
+  Hyperlink,
+} from '@edx/paragon';
+import { connect } from 'react-redux';
+
+import LoadingMessage from '../LoadingMessage';
+import MultipleBudgetsPicker from './MultipleBudgetsPicker';
+import { EnterpriseSubsidiesContext } from '../EnterpriseSubsidiesContext';
+
+import { configuration } from '../../config';
+
+const MultipleBudgetsPage = ({
+  enterpriseUUID,
+  createActions,
+}) => {
+  const { offers, isLoading } = useContext(EnterpriseSubsidiesContext);
+
+  if (isLoading) {
+    return <LoadingMessage className="offers" />;
+  }
+
+  if (offers.length === 0) {
+    return (
+      <Card>
+        <Card.Section className="text-center">
+          <Row>
+            <Col xs={12} lg={{ span: 8, offset: 2 }}>
+              <h3 className="mb-3">No budgets for your organization</h3>
+              <p>
+                We were unable to find any budgets for your organization. Please contact
+                Customer Support if you have questions.
+              </p>
+              <Hyperlink
+                className="btn btn-brand"
+                target="_blank"
+                destination={configuration.ENTERPRISE_SUPPORT_URL}
+              >
+                Contact support
+              </Hyperlink>
+            </Col>
+          </Row>
+        </Card.Section>
+      </Card>
+    );
+  }
+
+  return (
+    <>
+      <MultipleBudgetsPicker
+        offers={offers}
+        enterpriseUUID= {enterpriseUUID}
+        createActions={createActions}
+      />
+    </>
+  );
+};
+
+const mapStateToProps = state => ({
+  enterpriseUUID: state.portalConfiguration.enterpriseId,
+});
+
+MultipleBudgetsPage.defaultProps = {
+  createActions: null,
+};
+
+MultipleBudgetsPage.propTypes = {
+  enterpriseUUID: PropTypes.string.isRequired,
+  createActions: PropTypes.func,
+};
+
+export default connect(mapStateToProps)(MultipleBudgetsPage);

src/components/learner-credit-management/MultipleBudgetsPicker.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  Row,
+  Col,
+} from '@edx/paragon';
+
+import BudgetCard from './BudgetCard';
+
+const MultipleBudgetPicker = ({
+  offers,
+  enterpriseUUID,
+  createActions,
+}) => (
+  <Row>
+    <Col xs="12">
+      <h2>Budgets</h2>
+    </Col>
+    <Col lg="10">
+      {offers.map(offer => (
+        <BudgetCard
+          key={offer.id}
+          offer={offer}
+          enterpriseUUID={enterpriseUUID}
+          createActions={createActions}
+        />
+      ))}
+    </Col>
+  </Row>
+);
+
+MultipleBudgetsPicker.defaultProps = {
+  createActions: null,
+};
+
+MultipleBudgetsPicker.propTypes = {
+  offers: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  enterpriseUUID: PropTypes.string.isRequired,
+  createActions: PropTypes.func,
+};
+
+export default MultipleBudgetsPicker;