From de3136ab6b49fc33de0ccb473758414af241f8dc Mon Sep 17 00:00:00 2001 From: Andrew Rodiek Date: Thu, 3 Oct 2024 13:04:00 -0400 Subject: [PATCH] [CDP] 92800 - Replacing moment with date-fns in Combined Debt Portal (#32239) --- .../tests/unit/combinedHelpers.unit.spec.js | 30 ++++-- .../combined/utils/helpers.js | 31 +++--- .../debt-letters/components/Alerts.jsx | 4 +- .../components/DebtLettersTable.jsx | 96 +++++++++---------- .../debt-letters/components/HistoryTable.jsx | 6 +- .../debt-letters/containers/DebtDetails.jsx | 4 +- .../components/DownloadStatement.jsx | 9 +- .../components/HTMLStatementLink.jsx | 8 +- .../components/StatementCharges.jsx | 9 +- .../medical-copays/containers/DetailPage.jsx | 5 +- .../containers/HTMLStatementPage.jsx | 12 ++- 11 files changed, 115 insertions(+), 99 deletions(-) diff --git a/src/applications/combined-debt-portal/combined/tests/unit/combinedHelpers.unit.spec.js b/src/applications/combined-debt-portal/combined/tests/unit/combinedHelpers.unit.spec.js index 103340db529f..406f08f5516b 100644 --- a/src/applications/combined-debt-portal/combined/tests/unit/combinedHelpers.unit.spec.js +++ b/src/applications/combined-debt-portal/combined/tests/unit/combinedHelpers.unit.spec.js @@ -1,5 +1,5 @@ import { expect } from 'chai'; -import moment from 'moment'; +import { addMonths, subMonths } from 'date-fns'; import { getMedicalCenterNameByID } from 'platform/utilities/medical-centers/medical-centers'; import { APP_TYPES, @@ -12,6 +12,7 @@ import { verifyCurrentBalance, transform, setPageFocus, + formatDate, } from '../../utils/helpers'; describe('Helper Functions', () => { @@ -68,18 +69,33 @@ describe('Helper Functions', () => { }); }); + describe('formatDate - expected output example: October 13, 2018', () => { + const expectedResult = 'October 13, 2018'; + + it("should return correctly formatted date from string that uses '/' delimiter", () => { + const simpleDate = '10/13/2018'; + expect(formatDate(simpleDate)).to.equal(expectedResult); + }); + + it("should return correctly formatted date from string that has '-' delimiter", () => { + const simpleDate = '10-13-2018'; + expect(formatDate(simpleDate)).to.equal(expectedResult); + }); + + it('should return correctly formatted date from string from new date object', () => { + const simpleDate = new Date('10/13/2018'); + expect(formatDate(simpleDate)).to.equal(expectedResult); + }); + }); + describe('verifyCurrentBalance', () => { it('should return true if current date is on or before due date', () => { - const futureDate = moment() - .add(1, 'month') - .format('MM-DD-YYYY'); + const futureDate = addMonths(new Date(), 1); expect(verifyCurrentBalance(futureDate)).to.be.true; }); it('should return false if current date is after due date', () => { - const pastDate = moment() - .subtract(1, 'month') - .format('MM-DD-YYYY'); + const pastDate = subMonths(new Date(), 1); expect(verifyCurrentBalance(pastDate)).to.be.false; }); }); diff --git a/src/applications/combined-debt-portal/combined/utils/helpers.js b/src/applications/combined-debt-portal/combined/utils/helpers.js index aa0e243f9b82..a250ce21131d 100644 --- a/src/applications/combined-debt-portal/combined/utils/helpers.js +++ b/src/applications/combined-debt-portal/combined/utils/helpers.js @@ -1,8 +1,7 @@ import FEATURE_FLAG_NAMES from 'platform/utilities/feature-toggles/featureFlagNames'; import { toggleValues } from 'platform/site-wide/feature-toggles/selectors'; -import { format } from 'date-fns'; +import { addDays, format, isBefore, isEqual, isValid } from 'date-fns'; import { getMedicalCenterNameByID } from 'platform/utilities/medical-centers/medical-centers'; -import moment from 'moment'; import React from 'react'; export const APP_TYPES = Object.freeze({ @@ -33,8 +32,17 @@ export const showPaymentHistory = state => export const selectLoadingFeatureFlags = state => state?.featureToggles?.loading; +/** + * Helper function to consisently format date strings + * + * @param {string} date - date string or date type + * @returns formatted date string; example: + * - January 1, 2021 + */ export const formatDate = date => { - return format(new Date(date), 'MMMM d, yyyy'); + const newDate = + typeof date === 'string' ? new Date(date.replace(/-/g, '/')) : date; + return isValid(newDate) ? format(new Date(newDate), 'MMMM d, y') : ''; }; export const currency = amount => { @@ -57,9 +65,7 @@ export const formatTableData = tableData => })); export const calcDueDate = (date, days) => { - return moment(date, 'MM-DD-YYYY') - .add(days, 'days') - .format('MMMM D, YYYY'); + return formatDate(addDays(new Date(date), days)); }; export const titleCase = str => { @@ -73,19 +79,18 @@ export const titleCase = str => { // if currentDate is on or before dueDate show current status // else show past due status export const verifyCurrentBalance = date => { - const currentDate = moment(); + const currentDate = new Date(); const dueDate = calcDueDate(date, 30); - return currentDate.isSameOrBefore(dueDate); + return ( + isBefore(currentDate, new Date(dueDate)) || + isEqual(currentDate, new Date(dueDate)) + ); }; -// receiving formatted date strings in the response -// so we need to convert back to moment before sorting export const sortStatementsByDate = statements => { - const dateFormat = 'MM-DD-YYYY'; return statements.sort( (a, b) => - moment(b.pSStatementDate, dateFormat) - - moment(a.pSStatementDate, dateFormat), + new Date(b.pSStatementDateOutput) - new Date(a.pSStatementDateOutput), ); }; diff --git a/src/applications/combined-debt-portal/debt-letters/components/Alerts.jsx b/src/applications/combined-debt-portal/debt-letters/components/Alerts.jsx index c30d4fde2356..54195857fb60 100644 --- a/src/applications/combined-debt-portal/debt-letters/components/Alerts.jsx +++ b/src/applications/combined-debt-portal/debt-letters/components/Alerts.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import moment from 'moment'; import { Link } from 'react-router-dom'; import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts'; +import { formatDate } from '../../combined/utils/helpers'; export const DownloadLettersAlert = () => ( @@ -41,7 +41,7 @@ export const DowntimeMessage = () => { 12:30 a.m. to 3 a.m. ET. Thank you for your patience.

-

Date: {moment().format('dddd, MMMM D, YYYY')}

+

Date: {formatDate(new Date())}

Start/End time: 12:30 a.m. to 3:00 a.m. ET

What can you do

diff --git a/src/applications/combined-debt-portal/debt-letters/components/DebtLettersTable.jsx b/src/applications/combined-debt-portal/debt-letters/components/DebtLettersTable.jsx index dc96a4b47f59..b65b73ec1917 100644 --- a/src/applications/combined-debt-portal/debt-letters/components/DebtLettersTable.jsx +++ b/src/applications/combined-debt-portal/debt-letters/components/DebtLettersTable.jsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import moment from 'moment'; import environment from 'platform/utilities/environment'; import recordEvent from 'platform/monitoring/record-event'; import PropTypes from 'prop-types'; @@ -9,6 +8,7 @@ import { NoDebtLinks, DebtLetterDownloadDisabled, } from './Alerts'; +import { formatDate } from '../../combined/utils/helpers'; const DebtLettersTable = ({ debtLinks, @@ -27,10 +27,6 @@ const DebtLettersTable = ({ }); }; - const formatDate = date => { - return moment(date, 'YYYY-MM-DD').format('MMM D, YYYY'); - }; - const hasMoreThanOneDebt = debtLinks.length > 1; const debtLinksDescending = debtLinks.sort( @@ -49,13 +45,10 @@ const DebtLettersTable = ({

Latest debt letters