feat: show all enterprise budgets regardless of plan and route correctly

openedx · Sep 20, 2023 · 120ec59 · 120ec59
1 parent f19a8fe
commit 120ec59
Show file tree

Hide file tree

Showing 10 changed files with 184 additions and 135 deletions.
diff --git a/src/components/EnterpriseApp/data/constants.js b/src/components/EnterpriseApp/data/constants.js
@@ -13,3 +13,9 @@ export const ROUTE_NAMES = {
   subscriptionManagement: 'subscriptions',
   contentHighlights: 'content-highlights',
 };
+
+export const BUDGET_STATUSES = {
+  active: 'Active',
+  expired: 'Expired',
+  upcoming: 'Upcoming',
+};
diff --git a/src/components/EnterpriseSubsidiesContext/data/hooks.js b/src/components/EnterpriseSubsidiesContext/data/hooks.js
@@ -43,10 +43,10 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
           const { isActive } = subsidy; // Always check isActive for enterprise subsidies
           const isCurrent = isActive; // You can adjust this based on your specific requirements
           const activeSubsidyData = {
-            id: subsidy.uuid || subsidy.id,
-            name: subsidy.title || subsidy.displayName,
-            start: subsidy.activeDatetime || subsidy.startDatetime,
-            end: subsidy.expirationDatetime || subsidy.endDatetime,
+            id: subsidy.uuid,
+            name: subsidy.title,
+            start: subsidy.activeDatetime,
+            end: subsidy.expirationDatetime,
             isCurrent,
             source,
           };
@@ -61,10 +61,10 @@ export const useEnterpriseOffers = ({ enablePortalLearnerCreditManagementScreen,
           const source = 'ecommerceApi';
           const { isCurrent } = subsidy;
           const activeSubsidyData = {
-            id: subsidy.uuid || subsidy.id,
-            name: subsidy.title || subsidy.displayName,
-            start: subsidy.activeDatetime || subsidy.startDatetime,
-            end: subsidy.expirationDatetime || subsidy.endDatetime,
+            id: subsidy.id,
+            name: subsidy.displayName,
+            start: subsidy.startDatetime,
+            end: subsidy.endDatetime,
             isCurrent,
             source,
           };

diff --git a/src/components/learner-credit-management/BudgetCard-V2.jsx b/src/components/learner-credit-management/BudgetCard-V2.jsx
@@ -1,18 +1,44 @@
+/* eslint-disable */
 import React from 'react';
 import PropTypes from 'prop-types';
-import dayjs from 'dayjs';
 import {
   Stack,
+  Col,
+  Card,
+  Skeleton,
 } from '@edx/paragon';
 
 import { useOfferSummary } from './data/hooks';
 import SubBudgetCard from './Budgetcard-V3';
 
+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,
   enterpriseSlug,
   offerType,
+  displayName,
 }) => {
   const {
     start,
@@ -24,37 +50,35 @@ const BudgetCard = ({
     offerSummary,
   } = useOfferSummary(enterpriseUUID, offer);
 
-  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
-  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
-
   return (
     <Stack gap={4}>
-      <>
-        <h2>Budgets</h2>
-        {!isLoadingOfferSummary
-          && offerType === 'ecommerceApi'
-          ? (
-            <SubBudgetCard
-              id={offerSummary.offerId}
-              start={formattedStartDate}
-              end={formattedExpirationDate}
-              available={offerSummary?.remainingFunds}
-              spent={offerSummary?.redeemedFunds}
-              enterpriseSlug={enterpriseSlug}
-            />
-          )
-          : offerSummary?.budgetsSumary.map((budget) => (
-            <SubBudgetCard
-              key={budget.subsidyAccessPolicyUuid}
-              id={budget.subsidyAccessPolicyUuid}
-              start={formattedStartDate}
-              end={formattedExpirationDate}
-              available={budget?.remainingFunds}
-              spent={budget?.redeemedFunds}
-              enterpriseSlug={enterpriseSlug}
-            />
-          ))}
-      </>
+      <h2>Budgets</h2>
+      {isLoadingOfferSummary ? (
+        <LoadingCards />
+      ) : offerType === 'ecommerceApi' ? (
+        <SubBudgetCard
+          id={offerSummary.offerId}
+          start={start}
+          end={end}
+          available={offerSummary?.remainingFunds}
+          spent={offerSummary?.redeemedFunds}
+          displayName={displayName}
+          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}
+          />
+        ))
+      )}
     </Stack>
   );
 };
@@ -69,6 +93,7 @@ BudgetCard.propTypes = {
   enterpriseUUID: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
   offerType: PropTypes.string.isRequired,
+  displayName: PropTypes.string,
 };
 
 export default BudgetCard;
diff --git a/src/components/learner-credit-management/Budgetcard-V3.jsx b/src/components/learner-credit-management/Budgetcard-V3.jsx
@@ -1,99 +1,103 @@
+/* eslint-disable */ 
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import {
-  Card,
-  Button,
-  Stack,
-  Row,
-  Col,
+    Card,
+    Button,
+    Stack,
+    Row,
+    Col,
 } from '@edx/paragon';
 
-import { ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { BUDGET_STATUSES, ROUTE_NAMES } from '../EnterpriseApp/data/constants';
+import { getBudgetStatus } from './data/utils';
 
 const SubBudgetCard = ({
-  id,
-  start,
-  end,
-  available,
-  spent,
-  enterpriseSlug,
+    id,
+    start,
+    end,
+    available,
+    spent,
+    displayName,
+    enterpriseSlug,
 }) => {
-  const formattedStartDate = dayjs(start).format('MMMM D, YYYY');
-  const formattedExpirationDate = dayjs(end).format('MMMM D, YYYY');
+    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>
+    const renderActions = (id) => (
+        <Button
+            data-testid="view-budget"
+            as={Link}
+            to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.learnerCredit}/${id}`}
+        >
+            View budget
+        </Button>
     );
 
-    return (
-      <Card.Header
-        title={budgetType}
-        subtitle={subtitle}
-        actions={(
-          <div>
-            {renderActions(id)}
-          </div>
+    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>
-  );
+    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>
-        <Stack gap={4}>
-          {renderCardHeader('Overview', id)}
-          {renderCardSection(available, spent)}
-        </Stack>
-      </Card.Body>
-    </Card>
-  );
+    return (
+        <Card
+            orientation="horizontal"
+        >
+            <Card.Body>
+                <Stack gap={4}>
+                    {renderCardHeader(displayName || 'Overview', id)}
+                    {budgetStatus !== BUDGET_STATUSES.upcoming && renderCardSection(available, spent)}
+                </Stack>
+            </Card.Body>
+        </Card>
+    );
 };
 
 SubBudgetCard.propTypes = {
-  enterpriseSlug: PropTypes.string.isRequired,
-  id: PropTypes.string,
-  start: PropTypes.string,
-  end: PropTypes.string,
-  spent: PropTypes.number,
-  available: PropTypes.number,
-
+    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/MultipleBudgetsPicker.jsx b/src/components/learner-credit-management/MultipleBudgetsPicker.jsx
@@ -25,6 +25,7 @@ const MultipleBudgetsPicker = ({
             enterpriseSlug={enterpriseSlug}
             enableLearnerPortal={enableLearnerPortal}
             offerType={offer.source}
+            displayName={offer.name}
           />
         ))}
       </Col>

diff --git a/src/components/learner-credit-management/data/hooks.js b/src/components/learner-credit-management/data/hooks.js
@@ -74,7 +74,7 @@ const applyFiltersToOptions = (filters, options) => {
   }
 };
 
-export const useOfferRedemptions = (enterpriseUUID, offerId= null, budgetId = null) => {
+export const useOfferRedemptions = (enterpriseUUID, offerId = null, budgetId = null) => {
   const shouldTrackFetchEvents = useRef(false);
   const [isLoading, setIsLoading] = useState(true);
   const [offerRedemptions, setOfferRedemptions] = useState({

diff --git a/src/components/learner-credit-management/data/tests/hooks.test.js b/src/components/learner-credit-management/data/tests/hooks.test.js
@@ -73,7 +73,7 @@ describe('useOfferSummary', () => {
       remainingFunds: 4800,
       percentUtilized: 0.04,
       offerId: 1,
-      budgetsSumary: [],
+      budgetsSummary: [],
       offerType: undefined,
     };
     expect(result.current).toEqual({

diff --git a/src/components/learner-credit-management/data/tests/utils.test.js b/src/components/learner-credit-management/data/tests/utils.test.js
@@ -23,7 +23,7 @@ describe('transformOfferSummary', () => {
       remainingFunds: 0.0,
       percentUtilized: 1.0,
       offerType: EXEC_ED_OFFER_TYPE,
-      budgetsSumary: [],
+      budgetsSummary: [],
       offerId: undefined,
     });
   });
@@ -36,7 +36,7 @@ describe('transformOfferSummary', () => {
       percentOfOfferSpent: null,
       offerType: 'Site',
       offerId: '123',
-      budgetsSumary: [],
+      budgetsSummary: [],
     };
 
     expect(transformOfferSummary(offerSummary)).toEqual({
@@ -48,7 +48,7 @@ describe('transformOfferSummary', () => {
       redeemedFundsExecEd: undefined,
       redeemedFundsOcm: undefined,
       offerId: '123',
-      budgetsSumary: [],
+      budgetsSummary: [],
     });
   });
 });