From ec5f5cbc6aa1493aa87a9eedf05499be5a701911 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Wed, 15 May 2024 12:06:13 -0400 Subject: [PATCH 1/6] feat: Conditionally render expiring learner credit alerts and modals --- .../budget-expiry-notification/index.jsx | 11 +++- .../sidebar/LearnerCreditSummaryCard.jsx | 53 ++++++++++++++----- 2 files changed, 51 insertions(+), 13 deletions(-) diff --git a/src/components/budget-expiry-notification/index.jsx b/src/components/budget-expiry-notification/index.jsx index 644436592c..20c1c1ba37 100644 --- a/src/components/budget-expiry-notification/index.jsx +++ b/src/components/budget-expiry-notification/index.jsx @@ -7,6 +7,7 @@ import { } from '@openedx/paragon'; import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils'; +import dayjs from 'dayjs'; import useExpiry from './data/hooks/useExpiry'; import { useEnterpriseCustomer, useHasAvailableSubsidiesOrRequests } from '../app/data'; import { EVENT_NAMES } from './data/constants'; @@ -17,7 +18,11 @@ const BudgetExpiryNotification = () => { const [alertIsOpen, alertOpen, alertClose] = useToggle(false); const { data: enterpriseCustomer } = useEnterpriseCustomer(); const { learnerCreditSummaryCardData } = useHasAvailableSubsidiesOrRequests(); - const budget = useMemo(() => ({ end: learnerCreditSummaryCardData?.expirationDate }), [learnerCreditSummaryCardData]); + const budget = useMemo(() => ({ + end: learnerCreditSummaryCardData?.expirationDate, + isNonExpiredBudget: dayjs(learnerCreditSummaryCardData?.expirationDate).isAfter(dayjs()), + }), [learnerCreditSummaryCardData]); + const { alert, modal, dismissModal, dismissAlert, } = useExpiry( @@ -37,6 +42,10 @@ const BudgetExpiryNotification = () => { }; }, [modal, alert]); + if (budget.isNonExpiredBudget && enterpriseCustomer.disableExpiryMessagingForLearnerCredit) { + return null; + } + const contactEmail = getContactEmail(enterpriseCustomer); const AlertMessage = alert?.message; diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx index 079b3b0624..f6914da53c 100644 --- a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx +++ b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx @@ -1,9 +1,41 @@ -import React from 'react'; +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 SidebarCard from './SidebarCard'; +import { useEnterpriseCustomer } from '../../app/data'; + +/** + * If the disableExpiryMessagingForLearnerCredit configuration is true, we do not show the expiration badge variant, + * otherwise, display all other badge variants + * @param disableExpiryMessagingForLearnerCredit + * @param status + * @param badgeVariant + * @returns {React.JSX.Element|null} + */ +const conditionallyRenderCardBadge = ({ + disableExpiryMessagingForLearnerCredit, + status, + badgeVariant, +}) => { + if (status === 'Expiring' && disableExpiryMessagingForLearnerCredit) { + return null; + } + return ( + + + + ); +}; const LearnerCreditSummaryCard = ({ className, @@ -12,6 +44,13 @@ const LearnerCreditSummaryCard = ({ assignmentOnlyLearner, }) => { const { status, badgeVariant } = statusMetadata; + const { data: enterpriseCustomer } = useEnterpriseCustomer(); + + const cardBadge = useMemo(() => conditionallyRenderCardBadge({ + disableExpiryMessagingForLearnerCredit: enterpriseCustomer.disableExpiryMessagingForLearnerCredit, + status, + badgeVariant, + }), [badgeVariant, enterpriseCustomer.disableExpiryMessagingForLearnerCredit, status]); return ( - - - + {cardBadge} ) } From 63fae867ffdf08a513e2dec00204007177c5d507 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Fri, 17 May 2024 08:59:22 -0400 Subject: [PATCH 2/6] chore: tests --- .../enterpriseCustomerUser.factory.js | 1 + .../data/hooks/useExpiry.jsx | 7 +- .../data/hooks/useExpiry.test.jsx | 43 +++++++++- .../budget-expiry-notification/index.jsx | 4 - .../tests/LearnerCreditSummaryCard.test.jsx | 78 ++++++++++++++++++- 5 files changed, 122 insertions(+), 11 deletions(-) diff --git a/src/components/app/data/services/data/__factories__/enterpriseCustomerUser.factory.js b/src/components/app/data/services/data/__factories__/enterpriseCustomerUser.factory.js index c2f6c8f01d..321ee0e4b9 100644 --- a/src/components/app/data/services/data/__factories__/enterpriseCustomerUser.factory.js +++ b/src/components/app/data/services/data/__factories__/enterpriseCustomerUser.factory.js @@ -26,6 +26,7 @@ Factory.define('enterpriseCustomer') .attr('hide_labor_market_data', false) .attr('enable_learner_portal', true) .attr('enable_data_sharing_consent', true) + .attr('disable_expiry_messaging_for_learner_credit', false) .attr('admin_users', [{ email: faker.internet.email() }]) .attr('disable_search', false) .attr('enable_one_academy', false) diff --git a/src/components/budget-expiry-notification/data/hooks/useExpiry.jsx b/src/components/budget-expiry-notification/data/hooks/useExpiry.jsx index 54cae5b0cf..e9a549354f 100644 --- a/src/components/budget-expiry-notification/data/hooks/useExpiry.jsx +++ b/src/components/budget-expiry-notification/data/hooks/useExpiry.jsx @@ -4,15 +4,18 @@ import { getEnterpriseBudgetExpiringModalCookieName, } from '../utils'; import useExpirationMetadata from './useExpirationMetadata'; +import { useEnterpriseCustomer } from '../../../app/data'; const useExpiry = (enterpriseId, budget, modalOpen, modalClose, alertOpen, alertClose) => { const [alert, setAlert] = useState(null); const [expirationThreshold, setExpirationThreshold] = useState(null); const [modal, setModal] = useState(null); const { thresholdKey, threshold } = useExpirationMetadata(budget?.end); + const { data: { disableExpiryMessagingForLearnerCredit } } = useEnterpriseCustomer(); + const hasExpiryNotificationsDisabled = budget.isNonExpiredBudget && disableExpiryMessagingForLearnerCredit; useEffect(() => { - if (!budget || thresholdKey === null) { + if (!budget || thresholdKey === null || hasExpiryNotificationsDisabled) { return; } @@ -45,7 +48,7 @@ const useExpiry = (enterpriseId, budget, modalOpen, modalClose, alertOpen, alert if (!isAlertDismissed) { alertOpen(); } - }, [budget, modalOpen, alertOpen, enterpriseId, thresholdKey, threshold]); + }, [budget, modalOpen, alertOpen, enterpriseId, thresholdKey, threshold, hasExpiryNotificationsDisabled]); const dismissModal = () => { const seenCurrentExpirationModalCookieName = getEnterpriseBudgetExpiringModalCookieName({ diff --git a/src/components/budget-expiry-notification/data/hooks/useExpiry.test.jsx b/src/components/budget-expiry-notification/data/hooks/useExpiry.test.jsx index 65d72ab17a..dd506d8acf 100644 --- a/src/components/budget-expiry-notification/data/hooks/useExpiry.test.jsx +++ b/src/components/budget-expiry-notification/data/hooks/useExpiry.test.jsx @@ -8,6 +8,8 @@ import { SEEN_ENTERPRISE_EXPIRATION_ALERT_COOKIE_PREFIX, SEEN_ENTERPRISE_EXPIRATION_MODAL_COOKIE_PREFIX, } from '../constants'; +import { useEnterpriseCustomer } from '../../../app/data'; +import { enterpriseCustomerFactory } from '../../../app/data/services/data/__factories__'; dayjs.extend(duration); @@ -15,8 +17,13 @@ const modalOpen = jest.fn(); const modalClose = jest.fn(); const alertOpen = jest.fn(); const alertClose = jest.fn(); +const mockEnterpriseCustomer = enterpriseCustomerFactory(); jest.mock('./useExpirationMetadata', () => jest.fn()); +jest.mock('../../../app/data', () => ({ + ...jest.requireActual('../../../app/data'), + useEnterpriseCustomer: jest.fn(), +})); const enterpriseUUID = 'fake-id'; @@ -51,6 +58,7 @@ const mock60Threshold = { describe('useExpiry', () => { beforeEach(() => { jest.clearAllMocks(); + useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer }); useExpirationMetadata.mockReturnValue({ thresholdKey: null, threshold: null, @@ -76,7 +84,7 @@ describe('useExpiry', () => { isPlanApproachingExpiry: false, }); - const budget = { end: endDate }; // Mock data with an expiring budget + const budget = { end: endDate, isNonExpiredBudget: true }; // Mock data with an expiring budget const { result } = renderHook(() => ( useExpiry(enterpriseUUID, budget, modalOpen, modalClose, alertOpen, alertClose) )); @@ -98,4 +106,37 @@ describe('useExpiry', () => { expect(alertLocalstorage).toBeTruthy(); expect(modalLocalstorage).toBeTruthy(); }); + + it.each([ + { + thresholdKey: 60, + mock: mock60Threshold, + endDate: dayjs().add(60, 'day'), + }, + { + thresholdKey: 30, + endDate: dayjs().add(30, 'day'), + mock: mock30Threshold, + }, + ])('displays no alert or modal when plan is expiring in %s days and disableExpiryMessagingForLearnerCredit is false', ({ thresholdKey, mock, endDate }) => { + useExpirationMetadata.mockReturnValue({ + thresholdKey, + threshold: mock, + isPlanApproachingExpiry: false, + }); + useEnterpriseCustomer.mockReturnValue({ + data: { + ...mockEnterpriseCustomer, + disableExpiryMessagingForLearnerCredit: true, + }, + }); + + const budget = { end: endDate, isNonExpiredBudget: true }; // Mock data with an expiring budget + const { result } = renderHook(() => ( + useExpiry(enterpriseUUID, budget, modalOpen, modalClose, alertOpen, alertClose) + )); + + expect(result.current.alert).toEqual(null); + expect(result.current.modal).toEqual(null); + }); }); diff --git a/src/components/budget-expiry-notification/index.jsx b/src/components/budget-expiry-notification/index.jsx index 20c1c1ba37..532d618bf4 100644 --- a/src/components/budget-expiry-notification/index.jsx +++ b/src/components/budget-expiry-notification/index.jsx @@ -42,10 +42,6 @@ const BudgetExpiryNotification = () => { }; }, [modal, alert]); - if (budget.isNonExpiredBudget && enterpriseCustomer.disableExpiryMessagingForLearnerCredit) { - return null; - } - const contactEmail = getContactEmail(enterpriseCustomer); const AlertMessage = alert?.message; diff --git a/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx b/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx index 95e7fd1e1b..a38e9f22bd 100644 --- a/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx +++ b/src/components/dashboard/sidebar/tests/LearnerCreditSummaryCard.test.jsx @@ -2,6 +2,8 @@ import React from 'react'; import '@testing-library/jest-dom/extend-expect'; import { render, screen } from '@testing-library/react'; import { IntlProvider } from '@edx/frontend-platform/i18n'; +import { AppContext } from '@edx/frontend-platform/react'; +import dayjs from 'dayjs'; import LearnerCreditSummaryCard from '../LearnerCreditSummaryCard'; import { LEARNER_CREDIT_ASSIGNMENT_ONLY_SUMMARY, @@ -9,23 +11,38 @@ import { LEARNER_CREDIT_SUMMARY_CARD_TITLE, } from '../data/constants'; import { BUDGET_STATUSES } from '../../data'; +import { useEnterpriseCustomer } from '../../../app/data'; +import { authenticatedUserFactory, enterpriseCustomerFactory } from '../../../app/data/services/data/__factories__'; -const TEST_EXPIRATION_DATE = '2022-06-01T00:00:00Z'; - +const TEST_EXPIRATION_DATE = dayjs().add(10, 'days').toISOString(); +const TEST_EXPIRATION_DATE_TEXT = dayjs().add(10, 'days').format('MMM DD, YYYY'); const mockActiveStatusMetadata = { status: BUDGET_STATUSES.active, badgeVariant: 'success', term: 'Expires', date: TEST_EXPIRATION_DATE, }; +jest.mock('../../../app/data', () => ({ + ...jest.requireActual('../../../app/data'), + useEnterpriseCustomer: jest.fn(), +})); + +const mockEnterpriseCustomer = enterpriseCustomerFactory(); +const mockAuthenticatedUser = authenticatedUserFactory(); const LearnerCreditSummaryCardWrapper = (props) => ( - + + + ); describe('', () => { + beforeEach(() => { + jest.clearAllMocks(); + useEnterpriseCustomer.mockReturnValue({ data: mockEnterpriseCustomer }); + }); it('should render searchCoursesCta', () => { render( ', () => { />, ); expect(screen.getByTestId('learner-credit-summary-end-date-text')).toBeInTheDocument(); - expect(screen.getByText('2022', { exact: false })).toBeInTheDocument(); + expect(screen.getByText(TEST_EXPIRATION_DATE_TEXT, { exact: false })).toBeInTheDocument(); }); it.each([{ @@ -66,4 +83,57 @@ describe('', () => { ); expect(screen.getByText(summaryText)).toBeInTheDocument(); }); + + it.each([{ + activeStatusMetadata: { + status: 'Expiring', + badgeVariant: 'warning', + }, + disableExpiryMessagingForLearnerCredit: false, + }, + { + activeStatusMetadata: { + status: 'Expiring', + badgeVariant: 'warning', + }, + disableExpiryMessagingForLearnerCredit: true, + }, + { + activeStatusMetadata: { + status: 'Expired', + badgeVariant: 'danger', + }, + disableExpiryMessagingForLearnerCredit: false, + }, + { + activeStatusMetadata: { + status: 'Expired', + badgeVariant: 'danger', + }, + disableExpiryMessagingForLearnerCredit: true, + }])('should not display "Expiring" badge if disableExpiryMessagingForLearnerCredit is true', ({ + activeStatusMetadata, + disableExpiryMessagingForLearnerCredit, + }) => { + useEnterpriseCustomer.mockReturnValue({ + data: { + ...mockEnterpriseCustomer, + disableExpiryMessagingForLearnerCredit, + }, + }); + render( + , + ); + 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') { + expect(screen.queryByText(activeStatusMetadata.status)).not.toBeInTheDocument(); + } else { + expect(screen.queryByText(activeStatusMetadata.status)).toBeInTheDocument(); + } + }); }); From a5f8f81fc70b5ddbbed3f54ce835487214e0fff7 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Tue, 21 May 2024 16:24:03 -0400 Subject: [PATCH 3/6] chore: PR feedback --- .../sidebar/LearnerCreditSummaryCard.jsx | 55 ++++++++++++++++--- .../tests/LearnerCreditSummaryCard.test.jsx | 10 ++-- 2 files changed, 52 insertions(+), 13 deletions(-) diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx index f6914da53c..04e5c237f1 100644 --- 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: '{status}', + 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: '{status}', + 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: '{status}', + 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: '{status}', + 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.retired', + defaultMessage: '{status}', + description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + }, + }); + + const badgeMessage = { + active: intl.formatMessage(messages.active, { status }), + expired: intl.formatMessage(messages.expired, { status }), + expiring: intl.formatMessage(messages.expiring, { status }), + scheduled: intl.formatMessage(messages.scheduled, { status }), + retired: intl.formatMessage(messages.retired, { status }), + }; + return ( - + {badgeMessage[status.toLowerCase()]} ); }; @@ -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 ( ', () => { 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('', () => { ); 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(); From ba8e10b0ce2657f19fceef1dd6d7f1ebed0f1ac1 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Tue, 21 May 2024 16:48:47 -0400 Subject: [PATCH 4/6] chore: example i18n defineMessages (#1086) Co-authored-by: Adam Stankiewicz --- .../sidebar/LearnerCreditSummaryCard.jsx | 66 ++++++++----------- 1 file changed, 29 insertions(+), 37 deletions(-) diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx index 04e5c237f1..714b3d4936 100644 --- a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx +++ b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx @@ -9,6 +9,34 @@ import SidebarCard from './SidebarCard'; import { useEnterpriseCustomer } from '../../app/data'; import { BUDGET_STATUSES } from '../data'; +const badgeStatusMessages = defineMessages({ + active: { + id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.active', + defaultMessage: '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: '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: '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: '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.retired', + defaultMessage: 'Retired', + description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + }, +}); + /** * If the disableExpiryMessagingForLearnerCredit configuration is true, we do not show the expiration badge variant, * otherwise, display all other badge variants @@ -27,49 +55,13 @@ const conditionallyRenderCardBadge = ({ return null; } - const messages = defineMessages({ - active: { - 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.', - }, - expired: { - id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.expired', - defaultMessage: '{status}', - 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: '{status}', - 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: '{status}', - 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.retired', - defaultMessage: '{status}', - description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', - }, - }); - - const badgeMessage = { - active: intl.formatMessage(messages.active, { status }), - expired: intl.formatMessage(messages.expired, { status }), - expiring: intl.formatMessage(messages.expiring, { status }), - scheduled: intl.formatMessage(messages.scheduled, { status }), - retired: intl.formatMessage(messages.retired, { status }), - }; - return ( - {badgeMessage[status.toLowerCase()]} + {intl.formatMessage(badgeStatusMessages[status.toLowerCase()])} ); }; From 502b1b91c9f015eb6683ef5dc334a95394219f04 Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Tue, 21 May 2024 16:51:30 -0400 Subject: [PATCH 5/6] chore: Update description --- .../dashboard/sidebar/LearnerCreditSummaryCard.jsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx index 714b3d4936..68f2b41fe3 100644 --- a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx +++ b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx @@ -18,22 +18,22 @@ const badgeStatusMessages = defineMessages({ expired: { id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.expired', defaultMessage: 'Expired', - description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + description: 'Label for the expired badge on the learner credit summary card on the enterprise dashboard sidebar.', }, expiring: { id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.expiring', defaultMessage: 'Expiring', - description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + description: 'Label for the expiring badge on the learner credit summary card on the enterprise dashboard sidebar.', }, scheduled: { id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.scheduled', defaultMessage: 'Scheduled', - description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + description: 'Label for the scheduled badge on the learner credit summary card on the enterprise dashboard sidebar.', }, retired: { id: 'enterprise.dashboard.sidebar.learner.credit.card.badge.retired', defaultMessage: 'Retired', - description: 'Label for the active badge on the learner credit summary card on the enterprise dashboard sidebar.', + description: 'Label for the active retired on the learner credit summary card on the enterprise dashboard sidebar.', }, }); @@ -43,6 +43,7 @@ const badgeStatusMessages = defineMessages({ * @param disableExpiryMessagingForLearnerCredit * @param status * @param badgeVariant + * @param intl * @returns {React.JSX.Element|null} */ const conditionallyRenderCardBadge = ({ From d48b6291f7672b0df40173c52951e4e577dc703e Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Tue, 21 May 2024 16:53:09 -0400 Subject: [PATCH 6/6] chore: Cyclical dependency issue --- src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx index 68f2b41fe3..bcb3337166 100644 --- a/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx +++ b/src/components/dashboard/sidebar/LearnerCreditSummaryCard.jsx @@ -7,7 +7,7 @@ import { } from '@edx/frontend-platform/i18n'; import SidebarCard from './SidebarCard'; import { useEnterpriseCustomer } from '../../app/data'; -import { BUDGET_STATUSES } from '../data'; +import { BUDGET_STATUSES } from '../data/constants'; const badgeStatusMessages = defineMessages({ active: {