fix: incorporate adam's feedback

openedx · Sep 25, 2023 · 84be93a · 84be93a
1 parent d53064d
commit 84be93a
Show file tree

Hide file tree

Showing 12 changed files with 201 additions and 214 deletions.
diff --git 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
@@ -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,8 +49,8 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
 
         ecommerceOffersResults.forEach((result) => {
           offerData.push({
-            source: OFFER_TYPES.ecommerce,
-            id: result.id,
+            source: BUDGET_TYPES.ecommerce,
+            id: (result.id).toString(),
             name: result.displayName,
             start: result.startDatetime,
             end: result.endDatetime,

diff --git a/src/components/EnterpriseSubsidiesContext/data/tests/BudgetDetailPage.test.jsx b/src/components/EnterpriseSubsidiesContext/data/tests/BudgetDetailPage.test.jsx
@@ -107,7 +107,7 @@ describe('<BudgetDetailPage />', () => {
         enterpriseSlug={enterpriseId}
         offer={mockOffer}
       />);
-      expect(screen.getByText('Learner Credit Budget Detail'));
+      expect(screen.getByText('Learner Credit Management'));
       expect(screen.getByText('Overview'));
       expect(screen.getByText('No results found'));
     });

diff --git 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,15 +131,15 @@ 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',
         name: 'offer-name',
         start: '2021-05-15T19:56:09Z',
         end: '2100-05-15T19:56:09Z',
         isCurrent: true,
-        source: OFFER_TYPES.ecommerce,
+        source: BUDGET_TYPES.ecommerce,
       },
     ];
 
@@ -216,15 +214,15 @@ 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',
         name: 'offer-name-2',
         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
@@ -1,39 +1,11 @@
-/* eslint-disable */
+/* eslint-disable react/jsx-no-useless-fragment */
+/* 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,12 +24,11 @@ const BudgetCard = ({
   } = useOfferSummary(enterpriseUUID, offer);
 
   return (
-    <Stack gap={4} className='mt-4'>
-      {isLoadingOfferSummary ? (
-        <LoadingCards />
-      ) : offerType === OFFER_TYPES.ecommerce ? (
+    <>
+      {offerType === BUDGET_TYPES.ecommerce ? (
         <SubBudgetCard
-          id={offerSummary.offerId}
+          isLoading={isLoadingOfferSummary}
+          id={offerSummary?.offerId}
           start={start}
           end={end}
           available={offerSummary?.remainingFunds}
@@ -66,20 +37,23 @@ const BudgetCard = ({
           enterpriseSlug={enterpriseSlug}
         />
       ) : (
-        offerSummary?.budgetsSummary.map((budget) => (
-          <SubBudgetCard
-            key={budget.subsidyAccessPolicyUuid}
-            id={budget.subsidyAccessPolicyUuid}
-            start={start}
-            end={end}
-            available={budget?.remainingFunds}
-            spent={budget?.redeemedFunds}
-            displayName={budget?.subsidyAccessPolicyDisplayName}
-            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
@@ -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