From 329fae8d69aa2ac394f27798b156bbc0377402ba Mon Sep 17 00:00:00 2001 From: Hamzah Ullah Date: Wed, 18 Sep 2024 15:16:14 -0400 Subject: [PATCH] feat: surface time in the enroll-by date column (#1312) --- .../AssignmentEnrollByDateCell.jsx | 8 +++----- .../AssignmentEnrollByDateHeader.jsx | 8 ++------ .../learner-credit-management/data/constants.js | 2 +- src/components/learner-credit-management/data/utils.js | 9 +++++---- .../tests/BudgetDetailPage.test.jsx | 8 ++++---- 5 files changed, 15 insertions(+), 20 deletions(-) diff --git a/src/components/learner-credit-management/AssignmentEnrollByDateCell.jsx b/src/components/learner-credit-management/AssignmentEnrollByDateCell.jsx index d13f627ce7..b61a218713 100644 --- a/src/components/learner-credit-management/AssignmentEnrollByDateCell.jsx +++ b/src/components/learner-credit-management/AssignmentEnrollByDateCell.jsx @@ -1,10 +1,8 @@ import PropTypes from 'prop-types'; -import { - Icon, IconButtonWithTooltip, Stack, -} from '@openedx/paragon'; +import { Icon, IconButtonWithTooltip, Stack } from '@openedx/paragon'; import { Warning } from '@openedx/paragon/icons'; import { defineMessages, useIntl } from '@edx/frontend-platform/i18n'; -import { ENROLL_BY_DATE_DAYS_THRESHOLD, formatDate } from './data'; +import { DATETIME_FORMAT, ENROLL_BY_DATE_DAYS_THRESHOLD, formatDate } from './data'; import { isTodayWithinDateThreshold } from '../../utils'; const messages = defineMessages({ @@ -33,7 +31,7 @@ const ExpiringIconButtonWithTooltip = () => { const AssignmentEnrollByDateCell = ({ row }) => { const { original: { earliestPossibleExpiration: { date } } } = row; - const formattedEnrollByDate = formatDate(date); + const formattedEnrollByDate = formatDate(date, DATETIME_FORMAT); const isAssignmentExpiringSoon = isTodayWithinDateThreshold({ days: ENROLL_BY_DATE_DAYS_THRESHOLD, date, diff --git a/src/components/learner-credit-management/AssignmentEnrollByDateHeader.jsx b/src/components/learner-credit-management/AssignmentEnrollByDateHeader.jsx index 7ddb4c1ce7..a23eebe64d 100644 --- a/src/components/learner-credit-management/AssignmentEnrollByDateHeader.jsx +++ b/src/components/learner-credit-management/AssignmentEnrollByDateHeader.jsx @@ -1,9 +1,5 @@ import React from 'react'; -import { - Stack, - Icon, - IconButtonWithTooltip, -} from '@openedx/paragon'; +import { Icon, IconButtonWithTooltip, Stack } from '@openedx/paragon'; import { InfoOutline } from '@openedx/paragon/icons'; import { defineMessages, useIntl } from '@edx/frontend-platform/i18n'; @@ -15,7 +11,7 @@ const messages = defineMessages({ }, headerTooltipContent: { id: 'lcm.budget.detail.page.assignments.table.columns.enroll-by-date.header.tooltip-content', - defaultMessage: 'Failure to enroll by midnight of enrollment deadline date will release funds back into the budget', + defaultMessage: 'Failure to enroll by the enrollment deadline will release funds back into the budget', description: 'On hover tool tip message for the enroll-by date column', }, }); diff --git a/src/components/learner-credit-management/data/constants.js b/src/components/learner-credit-management/data/constants.js index 299f0dc7a9..7a26c27442 100644 --- a/src/components/learner-credit-management/data/constants.js +++ b/src/components/learner-credit-management/data/constants.js @@ -38,7 +38,7 @@ export const NO_BALANCE_REMAINING_DOLLAR_THRESHOLD = 100; export const DATE_FORMAT = 'MMMM DD, YYYY'; -export const SHORT_MONTH_DATE_FORMAT = 'MMM DD, YYYY'; +export const SHORT_MONTH_DATE_FORMAT = 'MMM D, YYYY'; export const DATETIME_FORMAT = 'MMM D, YYYY h:mma'; export const EXEC_ED_OFFER_TYPE = 'learner_credit'; diff --git a/src/components/learner-credit-management/data/utils.js b/src/components/learner-credit-management/data/utils.js index af89c414ee..8a5c25f50b 100644 --- a/src/components/learner-credit-management/data/utils.js +++ b/src/components/learner-credit-management/data/utils.js @@ -280,11 +280,12 @@ export const orderBudgets = (intl, budgets) => { /** * Formats a date string to MMM D, YYYY format. - * @param {string} date Date string. - * @returns Formatted date string. + * @param {string} date + * @param {string} format + * @returns {string} */ -export function formatDate(date) { - return dayjs(date).format('MMM D, YYYY'); +export function formatDate(date, format = 'MMM D, YYYY') { + return dayjs(date).format(format); } // Exec ed and open courses cards should display either the enrollment deadline diff --git a/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx b/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx index b0580801fd..be436e2d0c 100644 --- a/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx +++ b/src/components/learner-credit-management/tests/BudgetDetailPage.test.jsx @@ -17,21 +17,21 @@ import EnterpriseAccessApiService from '../../../data/services/EnterpriseAccessA import BudgetDetailPage from '../BudgetDetailPage'; import { + DEFAULT_PAGE, formatDate, formatPrice, + PAGE_SIZE, useBudgetContentAssignments, useBudgetDetailActivityOverview, useBudgetRedemptions, useEnterpriseCustomer, useEnterpriseGroup, useEnterpriseGroupLearners, - useEnterpriseRemovedGroupMembers, useEnterpriseOffer, + useEnterpriseRemovedGroupMembers, useIsLargeOrGreater, useSubsidyAccessPolicy, useSubsidySummaryAnalyticsApi, - DEFAULT_PAGE, - PAGE_SIZE, } from '../data'; import { EnterpriseSubsidiesContext } from '../../EnterpriseSubsidiesContext'; import { @@ -2573,7 +2573,7 @@ describe('', () => { userEvent.hover(enrollByDateTooltip); await waitFor(() => expect(screen.getByText( - 'Failure to enroll by midnight of enrollment deadline date will release funds back into the budget', + 'Failure to enroll by the enrollment deadline will release funds back into the budget', )).toBeTruthy()); }); });