From e719476eefe28882d311c243384a433701ce3cf0 Mon Sep 17 00:00:00 2001
From: jajjibhai008 <ejazofficial122@gmail.com>
Date: Fri, 22 Sep 2023 19:09:51 +0500
Subject: [PATCH] fix: incorporate adam's feedback

---
 .../EnterpriseApp/data/constants.js           |   2 +-
 .../EnterpriseSubsidiesContext/data/hooks.js  |  10 +-
 .../data/tests/hooks.test.js                  |  16 ++-
 .../BudgetCard-V2.jsx                         |  76 +++++--------
 .../BudgetDetailPage.jsx                      |  41 +++----
 .../Budgetcard-V3.jsx                         | 101 -----------------
 .../MultipleBudgetsPage.jsx                   |  17 +--
 .../MultipleBudgetsPicker.jsx                 |   4 +-
 .../SubBudgetCard.jsx                         | 103 ++++++++++++++++++
 .../learner-credit-management/data/utils.js   |   8 ++
 .../tests/BudgetCard.test.jsx                 |   4 +-
 11 files changed, 185 insertions(+), 197 deletions(-)
 delete mode 100644 src/components/learner-credit-management/Budgetcard-V3.jsx
 create mode 100644 src/components/learner-credit-management/SubBudgetCard.jsx

diff --git a/src/components/EnterpriseApp/data/constants.js b/src/components/EnterpriseApp/data/constants.js
index 8669c4983a..6feaac51f7 100644
--- a/src/components/EnterpriseApp/data/constants.js
+++ b/src/components/EnterpriseApp/data/constants.js
@@ -20,7 +20,7 @@ export const BUDGET_STATUSES = {
   upcoming: 'Upcoming',
 };
 
-export const OFFER_TYPES = {
+export const BUDGET_TYPES = {
   ecommerce: 'ecommerce',
   subsidy: 'subsidy',
 };
diff --git a/src/components/EnterpriseSubsidiesContext/data/hooks.js b/src/components/EnterpriseSubsidiesContext/data/hooks.js
index e10f23bed0..2a5443a25e 100644
--- a/src/components/EnterpriseSubsidiesContext/data/hooks.js
+++ b/src/components/EnterpriseSubsidiesContext/data/hooks.js
@@ -10,7 +10,7 @@ import { camelCaseObject } from '@edx/frontend-platform/utils';
 import EcommerceApiService from '../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
 import SubsidyApiService from '../../../data/services/EnterpriseSubsidyApiService';
-import { OFFER_TYPES } from '../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../EnterpriseApp/data/constants';
 
 export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen, enterpriseId }) => {
   const [offers, setOffers] = useState([]);
@@ -26,9 +26,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
       try {
         const [enterpriseSubsidyResponse, ecommerceApiResponse] = await Promise.all([
           SubsidyApiService.getSubsidyByCustomerUUID(enterpriseId, { subsidyType: 'learner_credit' }),
-          EcommerceApiService.fetchEnterpriseOffers({
-            isCurrent: true,
-          }),
+          EcommerceApiService.fetchEnterpriseOffers(),
         ]);
 
         // We have to consider both type of offers active and inactive.
@@ -40,7 +38,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
 
         enterpriseSubsidyResults.forEach((result) => {
           offerData.push({
-            source: OFFER_TYPES.subsidy,
+            source: BUDGET_TYPES.subsidy,
             id: result.uuid,
             name: result.title,
             start: result.activeDatetime,
@@ -51,7 +49,7 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
 
         ecommerceOffersResults.forEach((result) => {
           offerData.push({
-            source: OFFER_TYPES.ecommerce,
+            source: BUDGET_TYPES.ecommerce,
             id: result.id,
             name: result.displayName,
             start: result.startDatetime,
diff --git a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
index 3e3ad44f52..ec1c5466af 100644
--- a/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
+++ b/src/components/EnterpriseSubsidiesContext/data/tests/hooks.test.js
@@ -4,7 +4,7 @@ import { useCoupons, useCustomerAgreement, useEnterpriseOffers } from '../hooks'
 import EcommerceApiService from '../../../../data/services/EcommerceApiService';
 import LicenseManagerApiService from '../../../../data/services/LicenseManagerAPIService';
 import SubsidyApiService from '../../../../data/services/EnterpriseSubsidyApiService';
-import { OFFER_TYPES } from '../../../EnterpriseApp/data/constants';
+import { BUDGET_TYPES } from '../../../EnterpriseApp/data/constants';
 
 jest.mock('@edx/frontend-platform/config', () => ({
   getConfig: jest.fn(() => ({
@@ -52,7 +52,7 @@ describe('useEnterpriseOffers', () => {
       start: '2021-05-15T19:56:09Z',
       end: '2100-05-15T19:56:09Z',
       isCurrent: true,
-      source: OFFER_TYPES.ecommerce,
+      source: BUDGET_TYPES.ecommerce,
     }];
 
     SubsidyApiService.getSubsidyByCustomerUUID.mockResolvedValueOnce({
@@ -71,9 +71,7 @@ describe('useEnterpriseOffers', () => {
 
     await waitForNextUpdate();
 
-    expect(EcommerceApiService.fetchEnterpriseOffers).toHaveBeenCalledWith({
-      isCurrent: true,
-    });
+    expect(EcommerceApiService.fetchEnterpriseOffers).toHaveBeenCalled();
     expect(result.current).toEqual({
       offers: mockOffers,
       isLoading: false,
@@ -133,7 +131,7 @@ describe('useEnterpriseOffers', () => {
         start: '2021-05-15T19:56:09Z',
         end: '2100-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
       {
         id: 'uuid',
@@ -141,7 +139,7 @@ describe('useEnterpriseOffers', () => {
         start: '2021-05-15T19:56:09Z',
         end: '2100-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.ecommerce,
+        source: BUDGET_TYPES.ecommerce,
       },
     ];
 
@@ -216,7 +214,7 @@ describe('useEnterpriseOffers', () => {
         start: '2005-05-15T19:56:09Z',
         end: '2006-05-15T19:56:09Z',
         isCurrent: false,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
       {
         id: 'offer-2',
@@ -224,7 +222,7 @@ describe('useEnterpriseOffers', () => {
         start: '2006-05-15T19:56:09Z',
         end: '2099-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.subsidy,
+        source: BUDGET_TYPES.subsidy,
       },
     ];
 
diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
index b3ac7c695f..b033e8b6f5 100644
--- a/src/components/learner-credit-management/BudgetCard-V2.jsx
+++ b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -1,39 +1,14 @@
-/* eslint-disable */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Stack,
-  Col,
-  Card,
-  Skeleton,
 } from '@edx/paragon';
 
 import { useOfferSummary } from './data/hooks';
-import SubBudgetCard from './Budgetcard-V3';
-import { OFFER_TYPES } from '../EnterpriseApp/data/constants';
+import SubBudgetCard from './SubBudgetCard';
+import { BUDGET_TYPES } from '../EnterpriseApp/data/constants';
 
-const LoadingCards = () => (
-  <Stack gap={4}>
-    <Col className="d-flex flex-column">
-      <Card className="h-100">
-        <Card.Section className="d-flex align-items-center">
-          <div className="w-100" data-testid="loading-skeleton-card-3">
-            <Skeleton height={60} />
-          </div>
-        </Card.Section>
-      </Card>
-    </Col>
-    <Col className="d-flex flex-column">
-      <Card className="h-100">
-        <Card.Section className="d-flex align-items-center">
-          <div className="w-100" data-testid="loading-skeleton-card-3">
-            <Skeleton height={60} />
-          </div>
-        </Card.Section>
-      </Card>
-    </Col>
-  </Stack>
-);
 const BudgetCard = ({
   offer,
   enterpriseUUID,
@@ -52,33 +27,34 @@ const BudgetCard = ({
   } = useOfferSummary(enterpriseUUID, offer);
 
   return (
-    <Stack gap={4} className='mt-4'>
-      {isLoadingOfferSummary ? (
-        <LoadingCards />
-      ) : offerType === OFFER_TYPES.ecommerce ? (
-        <SubBudgetCard
-          id={offerSummary.offerId}
-          start={start}
-          end={end}
-          available={offerSummary?.remainingFunds}
-          spent={offerSummary?.redeemedFunds}
-          displayName={displayName}
-          enterpriseSlug={enterpriseSlug}
-        />
-      ) : (
-        offerSummary?.budgetsSummary.map((budget) => (
+    <Stack gap={4} className="mb-4">
+      {!isLoadingOfferSummary
+        && (offerType === BUDGET_TYPES.ecommerce ? (
           <SubBudgetCard
-            key={budget.subsidyAccessPolicyUuid}
-            id={budget.subsidyAccessPolicyUuid}
+            isLoading={isLoadingOfferSummary}
+            id={offerSummary?.offerId}
             start={start}
             end={end}
-            available={budget?.remainingFunds}
-            spent={budget?.redeemedFunds}
-            displayName={budget?.subsidyAccessPolicyDisplayName}
+            available={offerSummary?.remainingFunds}
+            spent={offerSummary?.redeemedFunds}
+            displayName={displayName}
             enterpriseSlug={enterpriseSlug}
           />
-        ))
-      )}
+        ) : (
+          offerSummary?.budgetsSummary.map((budget) => (
+            <SubBudgetCard
+              isLoading={isLoadingOfferSummary}
+              key={budget?.subsidyAccessPolicyUuid}
+              id={budget?.subsidyAccessPolicyUuid}
+              start={start}
+              end={end}
+              available={budget?.remainingFunds}
+              spent={budget?.redeemedFunds}
+              displayName={budget?.subsidyAccessPolicyDisplayName}
+              enterpriseSlug={enterpriseSlug}
+            />
+          ))
+        ))}
     </Stack>
   );
 };
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 = ({
     <>
       <Helmet title={PAGE_TITLE} />
       <Hero title={PAGE_TITLE} />
-      <Row className="m-3">
-        <Col xs="12">
-          <Breadcrumb
-            ariaLabel="Learner Credit Management breadcrumb navigation"
-            links={links}
-            linkAs={Link}
-            activeLabel="Overview"
-          />
-        </Col>
-      </Row>
-      <LearnerCreditAllocationTable
-        isLoading={isLoadingOfferRedemptions}
-        tableData={offerRedemptions}
-        fetchTableData={fetchOfferRedemptions}
-        enterpriseUUID={enterpriseUUID}
-        enterpriseSlug={enterpriseSlug}
-        enableLearnerPortal={enableLearnerPortal}
-      />
+      <Container className="py-3" fluid>
+        <Row className="m-3">
+          <Col xs="12">
+            <Breadcrumb
+              ariaLabel="Learner Credit Management breadcrumb navigation"
+              links={links}
+              linkAs={Link}
+              activeLabel="Overview"
+            />
+          </Col>
+        </Row>
+        <LearnerCreditAllocationTable
+          isLoading={isLoadingOfferRedemptions}
+          tableData={offerRedemptions}
+          fetchTableData={fetchOfferRedemptions}
+          enterpriseUUID={enterpriseUUID}
+          enterpriseSlug={enterpriseSlug}
+          enableLearnerPortal={enableLearnerPortal}
+        />
+      </Container>
     </>
   );
 };
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) => (
-        <Button
-            data-testid="view-budget"
-            as={Link}
-            to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}/${id}`}
-        >
-            View budget
-        </Button>
-    );
-
-    const renderCardHeader = (budgetType, id) => {
-        const subtitle = (
-            <div className="d-flex flex-wrap align-items-center">
-                <span data-testid="offer-date">
-                    {formattedStartDate} - {formattedExpirationDate}
-                </span>
-            </div>
-        );
-
-        return (
-            <Card.Header
-                title={budgetType}
-                subtitle={subtitle}
-                actions={(
-                    <div>
-                        {budgetStatus !== BUDGET_STATUSES.upcoming && renderActions(id)}
-                    </div>
-                )}
-            />
-        );
-    };
-
-    const renderCardSection = (available, spent) => (
-        <Card.Section
-            title="Balance"
-            muted
-        >
-            <Row className="d-flex flex-row justify-content-start w-md-75">
-                <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
-                    <span className="small">Available</span>
-                    <span>{available}</span>
-                </Col>
-                <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
-                    <span className="small">Spent</span>
-                    <span>{spent}</span>
-                </Col>
-            </Row>
-        </Card.Section>
-    );
-
-    return (
-        <Card
-            orientation="horizontal"
-        >
-            <Card.Body>
-                {renderCardHeader(displayName || 'Overview', id)}
-                {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
-            </Card.Body>
-        </Card>
-    );
-};
-
-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 = ({
     <>
       <Helmet title={PAGE_TITLE} />
       <Hero title={PAGE_TITLE} />
-      <MultipleBudgetsPicker
-        offers={offers}
-        enterpriseUUID={enterpriseUUID}
-        enterpriseSlug={enterpriseSlug}
-        enableLearnerPortal={enableLearnerPortal}
-      />
+      <Container className="py-3" fluid>
+        <MultipleBudgetsPicker
+          offers={offers}
+          enterpriseUUID={enterpriseUUID}
+          enterpriseSlug={enterpriseSlug}
+          enableLearnerPortal={enableLearnerPortal}
+        />
+      </Container>
     </>
   );
 };
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 = ({
 }) => (
   <Stack>
     <Row>
-      <Col lg="10">
+      <Col lg="12">
         <h2>Budgets</h2>
       </Col>
-      <Col lg="10">
+      <Col lg="12">
         {offers.map(offer => (
           <BudgetCard
             key={offer.id}
diff --git a/src/components/learner-credit-management/SubBudgetCard.jsx b/src/components/learner-credit-management/SubBudgetCard.jsx
new file mode 100644
index 0000000000..d3360cea43
--- /dev/null
+++ b/src/components/learner-credit-management/SubBudgetCard.jsx
@@ -0,0 +1,103 @@
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import dayjs from 'dayjs';
+import {
+  Card,
+  Button,
+  Row,
+  Col,
+} from '@edx/paragon';
+
+import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { formatPrice, getBudgetStatus } from './data/utils';
+
+const SubBudgetCard = ({
+  id,
+  start,
+  end,
+  available,
+  spent,
+  displayName,
+  enterpriseSlug,
+  isLoading,
+}) => {
+  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
+  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+  const budgetStatus = getBudgetStatus(start, end);
+
+  const renderActions = (budgetId) => (
+    <Button
+      data-testid="view-budget"
+      as={Link}
+      to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}/${budgetId}`}
+    >
+      View budget
+    </Button>
+  );
+
+  const renderCardHeader = (budgetType, budgetId) => {
+    const subtitle = (
+      <div className="d-flex flex-wrap align-items-center">
+        <span data-testid="offer-date">
+          {formattedStartDate} - {formattedExpirationDate}
+        </span>
+      </div>
+    );
+
+    return (
+      <Card.Header
+        title={budgetType}
+        subtitle={subtitle}
+        className="mb-3"
+        actions={
+                    budgetStatus !== BUDGET_STATUSES.upcoming
+                      ? renderActions(budgetId)
+                      : undefined
+                }
+      />
+    );
+  };
+
+  const renderCardSection = (availableBalance, spentBalance) => (
+    <Card.Section
+      title="Balance"
+      muted
+    >
+      <Row className="d-flex flex-row justify-content-start w-md-75">
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Available</span>
+          <span>{formatPrice(availableBalance)}</span>
+        </Col>
+        <Col xs="6" md="auto" className="d-flex flex-column mb-3 mb-md-0">
+          <span className="small">Spent</span>
+          <span>{formatPrice(spentBalance)}</span>
+        </Col>
+      </Row>
+    </Card.Section>
+  );
+
+  return (
+    <Card
+      orientation="horizontal"
+      isLoading={isLoading}
+    >
+      <Card.Body>
+        {renderCardHeader(displayName || 'Overview', id)}
+        {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
+      </Card.Body>
+    </Card>
+  );
+};
+
+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('<BudgetCard />', () => {
         name: mockOfferDisplayName,
         start: '2022-01-01',
         end: '2023-01-01',
-        offerType: OFFER_TYPES.ecommerce,
+        offerType: BUDGET_TYPES.ecommerce,
       };
       const mockOfferRedemption = {
         created: '2022-02-01',