chore: PR feedback

openedx · May 21, 2024 · d0b49ee · d0b49ee
1 parent 63fae86
commit d0b49ee
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 13 deletions.
diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx
@@ -2,9 +2,12 @@ import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Badge } from '@openedx/paragon';
 import dayjs from 'dayjs';
-import { FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  defineMessages, FormattedDate, FormattedMessage, useIntl,
+} from '@edx/frontend-platform/i18n';
 import SidebarCard from './SidebarCard';
 import { useEnterpriseCustomer } from '../../app/data';
+import { BUDGET_STATUSES } from '../data';
 
 /**
  * If the disableExpiryMessagingForLearnerCredit configuration is true, we do not show the expiration badge variant,
@@ -18,21 +21,55 @@ const conditionallyRenderCardBadge = ({
   disableExpiryMessagingForLearnerCredit,
   status,
   badgeVariant,
+  intl,
 }) => {
-  if (status === 'Expiring' && disableExpiryMessagingForLearnerCredit) {
+  if (status === BUDGET_STATUSES.expiring && disableExpiryMessagingForLearnerCredit) {
     return null;
   }
+
+  const messages = defineMessages({
+    active: {
+      id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.active',
+      defaultMessage: BUDGET_STATUSES.active,
+      description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.',
+    },
+    expired: {
+      id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.expired',
+      defaultMessage: BUDGET_STATUSES.expired,
+      description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.',
+    },
+    expiring: {
+      id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.expiring',
+      defaultMessage: BUDGET_STATUSES.expiring,
+      description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.',
+    },
+    scheduled: {
+      id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.scheduled',
+      defaultMessage: BUDGET_STATUSES.scheduled,
+      description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.',
+    },
+    retired: {
+      id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.active',
+      defaultMessage: BUDGET_STATUSES.retired,
+      description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.',
+    },
+  });
+
+  const badgeMessage = {
+    active: intl.formatMessage(messages.active),
+    expired: intl.formatMessage(messages.expired),
+    expiring: intl.formatMessage(messages.expiring),
+    scheduled: intl.formatMessage(messages.scheduled),
+    retired: intl.formatMessage(messages.retired),
+  };
+
   return (
     <Badge
       variant={badgeVariant}
       className="ml-2"
       data-testid="learner-credit-status-badge"
     >
-      <FormattedMessage
-        id="enterprise.dashboard.sidebar.learner.credit.card.badge.active"
-        defaultMessage={status}
-        description="Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar."
-      />
+      {badgeMessage[status.toLowerCase()]}
     </Badge>
   );
 };
@@ -45,12 +82,14 @@ const LearnerCreditSummaryCard = ({
 }) => {
   const { status, badgeVariant } = statusMetadata;
   const { data: enterpriseCustomer } = useEnterpriseCustomer();
+  const intl = useIntl();
 
   const cardBadge = useMemo(() => conditionallyRenderCardBadge({
     disableExpiryMessagingForLearnerCredit: enterpriseCustomer.disableExpiryMessagingForLearnerCredit,
     status,
     badgeVariant,
-  }), [badgeVariant, enterpriseCustomer.disableExpiryMessagingForLearnerCredit, status]);
+    intl,
+  }), [badgeVariant, enterpriseCustomer.disableExpiryMessagingForLearnerCredit, intl, status]);
 
   return (
     <SidebarCard

diff --git a/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx b/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx
@@ -86,28 +86,28 @@ describe('<LearnerCreditSummaryCard />', () => {
 
   it.each([{
     activeStatusMetadata: {
-      status: 'Expiring',
+      status: BUDGET_STATUSES.expiring,
       badgeVariant: 'warning',
     },
     disableExpiryMessagingForLearnerCredit: false,
   },
   {
     activeStatusMetadata: {
-      status: 'Expiring',
+      status: BUDGET_STATUSES.expiring,
       badgeVariant: 'warning',
     },
     disableExpiryMessagingForLearnerCredit: true,
   },
   {
     activeStatusMetadata: {
-      status: 'Expired',
+      status: BUDGET_STATUSES.expired,
       badgeVariant: 'danger',
     },
     disableExpiryMessagingForLearnerCredit: false,
   },
   {
     activeStatusMetadata: {
-      status: 'Expired',
+      status: BUDGET_STATUSES.expired,
       badgeVariant: 'danger',
     },
     disableExpiryMessagingForLearnerCredit: true,
@@ -130,7 +130,7 @@ describe('<LearnerCreditSummaryCard />', () => {
     );
     expect(screen.getByTestId('learner-credit-summary-end-date-text')).toBeInTheDocument();
     expect(screen.getByText(TEST_EXPIRATION_DATE_TEXT, { exact: false })).toBeInTheDocument();
-    if (disableExpiryMessagingForLearnerCredit && activeStatusMetadata.status === 'Expiring') {
+    if (disableExpiryMessagingForLearnerCredit && activeStatusMetadata.status === BUDGET_STATUSES.expiring) {
       expect(screen.queryByText(activeStatusMetadata.status)).not.toBeInTheDocument();
     } else {
       expect(screen.queryByText(activeStatusMetadata.status)).toBeInTheDocument();