Answer 2 questions to find out how your income may affect your VA health
care eligibility and costs.
diff --git a/src/applications/income-limits/containers/ResultsPage.jsx b/src/applications/income-limits/containers/ResultsPage.jsx
index 3037a7f70d34..979e5f07aac9 100644
--- a/src/applications/income-limits/containers/ResultsPage.jsx
+++ b/src/applications/income-limits/containers/ResultsPage.jsx
@@ -13,7 +13,6 @@ import {
getFifthAccordionHeader,
} from '../utilities/results-accordions';
import { getPreviousYear, redirectIfFormIncomplete } from '../utilities/utils';
-import { customizeTitle } from '../utilities/customize-title';
/**
* There are two pathways to displaying income ranges on this page
@@ -24,11 +23,6 @@ import { customizeTitle } from '../utilities/customize-title';
const Results = ({ dependents, pastMode, results, router, year, zipCode }) => {
const APPLY_URL = '/health-care/apply-for-health-care-form-10-10ez/';
const currentYear = new Date().getFullYear();
- const H1 = `Your income limits for ${year || currentYear}`;
-
- useEffect(() => {
- document.title = customizeTitle(H1);
- });
useEffect(
() => {
@@ -126,7 +120,7 @@ const Results = ({ dependents, pastMode, results, router, year, zipCode }) => {
return (
<>
-
{
const [submitting, setSubmitting] = useState(false);
- const H1 = 'Review your information';
-
- useEffect(() => {
- document.title = customizeTitle(H1);
- });
useEffect(() => {
if (editMode) {
@@ -112,7 +106,7 @@ const ReviewPage = ({
return (
<>
- {H1}
+ Review your information
Make any edits that you may need to. Then select{' '}
Continue.
diff --git a/src/applications/income-limits/containers/YearPage.jsx b/src/applications/income-limits/containers/YearPage.jsx
index e7d30dc6ddd9..ba482be89f90 100644
--- a/src/applications/income-limits/containers/YearPage.jsx
+++ b/src/applications/income-limits/containers/YearPage.jsx
@@ -9,7 +9,6 @@ import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform
import { ROUTES } from '../constants';
import { updateEditMode, updateYear } from '../actions';
-import { customizeTitle } from '../utilities/customize-title';
const YearPage = ({
editMode,
@@ -21,11 +20,6 @@ const YearPage = ({
}) => {
const [error, setError] = useState(false);
const [submitted, setSubmitted] = useState(false);
- const H1 = 'Income limits from past years going back to 2001';
-
- useEffect(() => {
- document.title = customizeTitle(H1);
- });
useEffect(
() => {
@@ -93,7 +87,7 @@ const YearPage = ({
return (
<>
-
{H1}
+ Income limits from past years going back to 2001
Select the year you’d like to check income limits for. Then answer
2 questions to find out how your income may have affected your VA health
diff --git a/src/applications/income-limits/containers/ZipCodePage.jsx b/src/applications/income-limits/containers/ZipCodePage.jsx
index c46a2c55d8f2..6546bf33d7cf 100644
--- a/src/applications/income-limits/containers/ZipCodePage.jsx
+++ b/src/applications/income-limits/containers/ZipCodePage.jsx
@@ -14,7 +14,6 @@ import {
updateZipValidationServiceError,
} from '../actions';
import { validateZip } from '../api';
-import { customizeTitle } from '../utilities/customize-title';
const ZipCodePage = ({
editMode,
@@ -36,10 +35,6 @@ const ZipCodePage = ({
: `What was your zip code last year?`;
};
- useEffect(() => {
- document.title = customizeTitle(determineH1());
- });
-
// Checks that a zip was entered and is numbers only and has length of 5
const inputValid = zip => {
return zipCode && zip.match(/^[0-9]+$/) && zip.length === 5;
diff --git a/src/applications/income-limits/utilities/customize-title.js b/src/applications/income-limits/utilities/customize-title.js
deleted file mode 100644
index a4b00c93fb2e..000000000000
--- a/src/applications/income-limits/utilities/customize-title.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Used to customize the
element in the head of the document
-// for accessibility
-export const customizeTitle = h1 => {
- if (h1) {
- return `${h1} | Income Limits | Veterans Affairs`;
- }
-
- return 'Income Limits | Veterans Affairs';
-};
From 6c883850d1ba55e1c5256b78c0d89100d1c925aa Mon Sep 17 00:00:00 2001
From: wafimohamed <158514667+wafimohamed@users.noreply.github.com>
Date: Thu, 3 Oct 2024 12:25:17 -0400
Subject: [PATCH 6/9] vebt-40 update error message for email Address (#32206)
* vebt-40 update error message for meail
* removed dublicate FORM_22_10282 from missingFromVetsJsonSchema
* removed dublicate FORM_22_10282 from missingFromVetsJsonSchema
---
src/applications/edu-benefits/10282/config/form.js | 1 -
.../10282/pages/applicantInformation/applicantContactInfo.js | 4 ++++
2 files changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/applications/edu-benefits/10282/config/form.js b/src/applications/edu-benefits/10282/config/form.js
index 63e1765a3dcd..a1fd2d2a9c53 100644
--- a/src/applications/edu-benefits/10282/config/form.js
+++ b/src/applications/edu-benefits/10282/config/form.js
@@ -25,7 +25,6 @@ import FormHelp from '../components/FormHelp';
import IntroductionPage from '../containers/IntroductionPage';
const { fullName, email, usaPhone } = commonDefinitions;
-
const formConfig = {
rootUrl: manifest.rootUrl,
urlPrefix: '/',
diff --git a/src/applications/edu-benefits/10282/pages/applicantInformation/applicantContactInfo.js b/src/applications/edu-benefits/10282/pages/applicantInformation/applicantContactInfo.js
index f499909fa35e..c141c7ec125a 100644
--- a/src/applications/edu-benefits/10282/pages/applicantInformation/applicantContactInfo.js
+++ b/src/applications/edu-benefits/10282/pages/applicantInformation/applicantContactInfo.js
@@ -18,6 +18,10 @@ export const uiSchema = {
'ui:title': 'Email address',
'ui:webComponentField': VaTextInputField,
'ui:errorMessages': {
+ format:
+ 'Enter a valid email address using the format email@domain.com. Your email address can only have letters, numbers, the @ symbol and a period, with no spaces.',
+ pattern:
+ 'Enter a valid email address using the format email@domain.com. Your email address can only have letters, numbers, the @ symbol and a period, with no spaces.',
required: 'Please enter an email address',
},
},
From dfaeef0ad665a9fb4c389cc7d7ade919afdffeea Mon Sep 17 00:00:00 2001
From: nicholashibbits1 <nicholas.hibbits@va.gov>
Date: Thu, 3 Oct 2024 09:35:41 -0700
Subject: [PATCH 7/9] Edm 120 part 1 (#32210)
* Add license/cert route and container component
* add header
* Establish search page layout with dropdowns
* save
* resolve width differences between Dropdown and va-text-input components
* Add constant dropdown values for cleaner markup
* cleanup for PR
* refactor to use va style classes
---
.../LicenseCertificationSearchFields.jsx | 56 +++++++++++++++++++
.../containers/LicenseCertificationSearch.jsx | 25 +++++++++
src/applications/gi/routes.jsx | 4 +-
src/applications/gi/sass/gi.scss | 4 ++
.../feature-toggles/featureFlagNames.json | 3 +-
5 files changed, 89 insertions(+), 3 deletions(-)
create mode 100644 src/applications/gi/components/LicenseCertificationSearchFields.jsx
create mode 100644 src/applications/gi/containers/LicenseCertificationSearch.jsx
diff --git a/src/applications/gi/components/LicenseCertificationSearchFields.jsx b/src/applications/gi/components/LicenseCertificationSearchFields.jsx
new file mode 100644
index 000000000000..008db36e6b4c
--- /dev/null
+++ b/src/applications/gi/components/LicenseCertificationSearchFields.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import Dropdown from './Dropdown';
+
+const dropdowns = [
+ {
+ label: 'Category',
+ options: [
+ { optionValue: 'License', optionLabel: 'License' },
+ { optionValue: 'Certification', optionLabel: 'Certification' },
+ ],
+ alt: 'Category Type',
+ },
+ {
+ label: 'Country',
+ options: [{ optionValue: 'Country', optionLabel: 'Country' }],
+ alt: 'Country',
+ },
+ {
+ label: 'State',
+ options: [{ optionValue: 'State', optionLabel: 'State' }],
+ alt: 'State',
+ },
+];
+
+function LicenseCertificationSearchFields() {
+ const handleChange = e => {
+ return e.target;
+ };
+
+ return (
+ <>
+ <div className="row">
+ <va-text-input label="License/Certification Name" />
+ </div>
+ {dropdowns.map((dropdown, index) => {
+ return (
+ <div className="row" key={index}>
+ <Dropdown
+ disabled={false}
+ label={dropdown.label}
+ visible
+ name="Cateogry"
+ options={dropdown.options}
+ value=""
+ onChange={handleChange}
+ alt={dropdown.alt}
+ selectClassName="lc-dropdown-filter"
+ />
+ </div>
+ );
+ })}
+ </>
+ );
+}
+
+export default LicenseCertificationSearchFields;
diff --git a/src/applications/gi/containers/LicenseCertificationSearch.jsx b/src/applications/gi/containers/LicenseCertificationSearch.jsx
new file mode 100644
index 000000000000..14a34d549b1e
--- /dev/null
+++ b/src/applications/gi/containers/LicenseCertificationSearch.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import LicenseCertificationSearchFields from '../components/LicenseCertificationSearchFields';
+
+function LicenseCertificationSearch() {
+ return (
+ <div>
+ <section className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--2p5 mobile-lg:vads-u-padding-x--2">
+ <div className="row">
+ <h1 className="vads-u-text-align--center mobile-lg:vads-u-text-align--left">
+ Licenses and Certifications
+ </h1>
+ <p className="vads-u-font-size--h3 vads-u-color--gray-dark">
+ Licenses and certifications search page
+ </p>
+ </div>
+ <LicenseCertificationSearchFields />
+ <div className="button-wrapper row vads-u-padding-y--6">
+ <va-button text="Submit" />
+ </div>
+ </section>
+ </div>
+ );
+}
+
+export default LicenseCertificationSearch;
diff --git a/src/applications/gi/routes.jsx b/src/applications/gi/routes.jsx
index 85ab264a0b39..014fb9a31c6c 100644
--- a/src/applications/gi/routes.jsx
+++ b/src/applications/gi/routes.jsx
@@ -1,7 +1,7 @@
-import GiBillApp from './containers/GiBillApp';
-import SearchPage from './containers/SearchPage';
import { Route, Switch, Redirect } from 'react-router-dom';
import React from 'react';
+import GiBillApp from './containers/GiBillApp';
+import SearchPage from './containers/SearchPage';
import ComparePage from './containers/ComparePage';
import ProfilePage from './containers/ProfilePage';
diff --git a/src/applications/gi/sass/gi.scss b/src/applications/gi/sass/gi.scss
index d50f4c6d0fc5..3d483ae7cc58 100644
--- a/src/applications/gi/sass/gi.scss
+++ b/src/applications/gi/sass/gi.scss
@@ -271,3 +271,7 @@
cursor: pointer;
}
}
+
+.lc-dropdown-filter {
+ max-width: 30rem;
+}
diff --git a/src/platform/utilities/feature-toggles/featureFlagNames.json b/src/platform/utilities/feature-toggles/featureFlagNames.json
index 03d5b395d714..45579082d669 100644
--- a/src/platform/utilities/feature-toggles/featureFlagNames.json
+++ b/src/platform/utilities/feature-toggles/featureFlagNames.json
@@ -288,5 +288,6 @@
"virtualAgentVoice": "virtual_agent_voice",
"vyeLoginWidget": "vye_login_widget",
"yellowRibbonAutomatedDateOnSchoolSearch": "yellow_ribbon_automated_date_on_school_search",
- "showYellowRibbonTable": "show_yellow_ribbon_table"
+ "showYellowRibbonTable": "show_yellow_ribbon_table",
+ "showLcInComparisonTool": "show_lc_in_comparison_tool"
}
From 9d822e25fd08be589d11c05901918cbf3a4739e0 Mon Sep 17 00:00:00 2001
From: mghisilieri <michael.ghisilieri@va.gov>
Date: Thu, 3 Oct 2024 09:40:08 -0700
Subject: [PATCH 8/9] VEBT-24 Updated 'Privacy Act Statement' on 22-10282 Intro
Page (#32209)
* Updated 'Privacy Act Statement' on 22-10282 Intro Page
* content feedback changes to wording and bullet point type
* 'Respondent Burden' section added to Privacy Act Statement
---
.../edu-benefits/10282/components/OmbInfo.jsx | 54 +++++++++++++++++++
.../10282/containers/IntroductionPage.jsx | 17 +++---
.../10282/sass/10282-edu-benefits.scss | 22 ++++----
3 files changed, 69 insertions(+), 24 deletions(-)
create mode 100644 src/applications/edu-benefits/10282/components/OmbInfo.jsx
diff --git a/src/applications/edu-benefits/10282/components/OmbInfo.jsx b/src/applications/edu-benefits/10282/components/OmbInfo.jsx
new file mode 100644
index 000000000000..40eb79b8b8ea
--- /dev/null
+++ b/src/applications/edu-benefits/10282/components/OmbInfo.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
+
+const OmbInfo = () => {
+ const resBurden = 10;
+
+ return (
+ <va-omb-info
+ res-burden={resBurden}
+ omb-number="2900-0922"
+ exp-date="9/30/2026"
+ >
+ <p>
+ <strong>Respondent Burden:</strong> We need this information to
+ determine your eligibility for benefits (38 U.S.C. 3471). Title 38,
+ United States Code, allows us to ask for this information. We estimate
+ that you will need an average of {resBurden} minutes to review the
+ instructions, find the information, and complete this form. The VA
+ cannot conduct or sponsor a collection of information unless a valid OMB
+ (Office of Management and Budget) control number is displayed. You are
+ not required to respond to a collection of information if this number is
+ not displayed. Valid OMB control numbers can be located on the OMB
+ Internet Page at www.reginfo.gov/public/do/PRAMain. If desired, you can
+ call <va-telephone contact={CONTACTS.VA_BENEFITS} international /> to
+ get information on where to send comments or suggestions about this
+ form.
+ </p>
+
+ <p>
+ <strong>Privacy Act information:</strong> VA will not disclose
+ information collected on this form to any source other than what has
+ been authorized under the Privacy Act of 1974 or Title 38, Code of
+ Federal Regulations 1.576 for routine uses (i.e., VA sends educational
+ forms or letters with a Veteran’s identifying information to the
+ Veteran’s school or training establishment to (1) assist the Veteran in
+ the completion of claims forms or (2) VA obtains further information as
+ may be necessary from the school for VA to properly process the
+ Veteran’s education claim or to monitor his or her progress during
+ training) as identified in the VA system of records. 58VA21/22/28,
+ Compensation, Pension, Education, and Veteran Readiness and Employment
+ Records - VA, published in the Federal Register. Your response is
+ required to obtain or retain benefits under this cost-free IBM
+ SkillsBuild Cybersecurity Training Program. While you do not have to
+ respond, VA cannot consider you approved to participate until we receive
+ this information per (38 U.S.C. 3452(b) and 3501(a)). Your responses are
+ confidential (38 U.S.C. 5701). Information submitted is subject to
+ verification through computer matching programs with other agencies.
+ </p>
+ </va-omb-info>
+ );
+};
+
+export default OmbInfo;
diff --git a/src/applications/edu-benefits/10282/containers/IntroductionPage.jsx b/src/applications/edu-benefits/10282/containers/IntroductionPage.jsx
index a9d98aba9cbc..3fd8bea7ff62 100644
--- a/src/applications/edu-benefits/10282/containers/IntroductionPage.jsx
+++ b/src/applications/edu-benefits/10282/containers/IntroductionPage.jsx
@@ -2,10 +2,11 @@ import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import FormTitle from 'platform/forms-system/src/js/components/FormTitle';
-
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import { focusElement } from 'platform/utilities/ui';
+import OmbInfo from '../components/OmbInfo';
+
const IntroductionPage = ({ router }) => {
useEffect(() => {
focusElement('.schemaform-title > h1');
@@ -31,10 +32,10 @@ const IntroductionPage = ({ router }) => {
<h2 className="vads-u-margin-y--3 mobile-lg:vads-u-margin-y--4">
What to know before you fill out this form
</h2>
- <ul className="intro-ul">
+ <ul>
<li>
- You may be eligible for this program if you’re a Veteran, a service
- member, or a family member or caregiver of a Veteran.
+ You may be eligible for this program if you’re a Veteran; service
+ member; or the spouse, child, or caregiver of a Veteran.
</li>
<li>
After you submit your form, you can print the confirmation page for
@@ -55,13 +56,7 @@ const IntroductionPage = ({ router }) => {
/>
</div>
- <div className="intro-omb-info">
- <va-omb-info
- res-burden={10}
- omb-number="2900-0922"
- exp-date="9/30/2026"
- />
- </div>
+ <OmbInfo />
</article>
);
};
diff --git a/src/applications/edu-benefits/10282/sass/10282-edu-benefits.scss b/src/applications/edu-benefits/10282/sass/10282-edu-benefits.scss
index a3c386498c73..ddfc976099f7 100644
--- a/src/applications/edu-benefits/10282/sass/10282-edu-benefits.scss
+++ b/src/applications/edu-benefits/10282/sass/10282-edu-benefits.scss
@@ -10,26 +10,22 @@
margin-bottom: 1rem;
}
-.intro-ul {
- list-style-type: disc;
-}
-
@media (max-width: $small-screen) {
-
- .form-22-10282-container{
- padding-inline: .5rem;
+ .form-22-10282-container {
+ padding-inline: 0.5rem;
}
+
.form-22-10282-container .schemaform-buttons,
- .form-22-10282-container .form-progress-buttons{
+ .form-22-10282-container .form-progress-buttons {
display: flex;
flex-direction: column !important;
- div{
+
+ div {
width: 100%;
}
+
div:first-of-type {
- order: 2;
- }
+ order: 2;
+ }
}
-
}
-
From de3136ab6b49fc33de0ccb473758414af241f8dc Mon Sep 17 00:00:00 2001
From: Andrew Rodiek <andrew.rodiek@gmail.com>
Date: Thu, 3 Oct 2024 13:04:00 -0400
Subject: [PATCH 9/9] [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 = () => (
<va-alert status="warning">
@@ -41,7 +41,7 @@ export const DowntimeMessage = () => {
12:30 a.m. to 3 a.m. ET. Thank you for your patience.
</p>
- <p>Date: {moment().format('dddd, MMMM D, YYYY')}</p>
+ <p>Date: {formatDate(new Date())}</p>
<p>Start/End time: 12:30 a.m. to 3:00 a.m. ET</p>
<h4>What can you do</h4>
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 = ({
<h3>Latest debt letters</h3>
<ul
className="no-bullets vads-u-padding-x--0"
- data-testId="debt-letters-table"
+ data-testid="debt-letters-table"
>
{[first, second].map(debt => {
- const recvDate = moment(debt.receivedAt, 'YYYY-MM-DD').format(
- 'MMM D, YYYY',
- );
-
+ const recvDate = formatDate(debt.receivedAt);
return (
<li key={debt.documentId}>
<a
@@ -109,47 +102,50 @@ const DebtLettersTable = ({
{showOlder && hasMoreThanOneDebt ? (
<ol id="older-letters-list" className="no-bullets vads-u-padding-x--0">
- {rest.map((debt, index) => (
- <li key={index}>
- <div>
- <a
- target="_blank"
- rel="noopener noreferrer"
- onClick={() =>
- handleDownload(debt.typeDescription, formatDate(debt.date))
- }
- download={`${debt.typeDescription} dated ${formatDate(
- debt.date,
- )}`}
- href={encodeURI(
- `${environment.API_URL}/v0/debt_letters/${debt.documentId}`,
- )}
- >
- <va-icon
- icon="file_download"
- size={3}
- className="vads-u-padding-right--1"
- />
+ {rest.map((debt, index) => {
+ const recvDate = formatDate(debt.date);
+ return (
+ <li key={index}>
+ <div>
+ <a
+ target="_blank"
+ rel="noopener noreferrer"
+ onClick={() =>
+ handleDownload(debt.typeDescription, recvDate)
+ }
+ download={`${debt.typeDescription} dated ${recvDate}`}
+ href={encodeURI(
+ `${environment.API_URL}/v0/debt_letters/${
+ debt.documentId
+ }`,
+ )}
+ >
+ <va-icon
+ icon="file_download"
+ size={3}
+ className="vads-u-padding-right--1"
+ />
- <span aria-hidden="true">
- {`${formatDate(debt.date)} - ${debt.typeDescription}`}{' '}
- </span>
- <span className="sr-only">
- Download {debt.typeDescription} dated
- <time
- dateTime={formatDate(debt.date)}
- className="vads-u-margin-left--0p5"
- >
- {formatDate(debt.date)}
- </time>
- </span>
- <dfn>
- <abbr title="Portable Document Format">(PDF)</abbr>
- </dfn>
- </a>
- </div>
- </li>
- ))}
+ <span aria-hidden="true">
+ {`${recvDate} - ${debt.typeDescription}`}{' '}
+ </span>
+ <span className="sr-only">
+ Download {debt.typeDescription} dated
+ <time
+ dateTime={recvDate}
+ className="vads-u-margin-left--0p5"
+ >
+ {recvDate}
+ </time>
+ </span>
+ <dfn>
+ <abbr title="Portable Document Format">(PDF)</abbr>
+ </dfn>
+ </a>
+ </div>
+ </li>
+ );
+ })}
</ol>
) : null}
</>
diff --git a/src/applications/combined-debt-portal/debt-letters/components/HistoryTable.jsx b/src/applications/combined-debt-portal/debt-letters/components/HistoryTable.jsx
index 8a12f3aacb8b..0b928e31f6af 100644
--- a/src/applications/combined-debt-portal/debt-letters/components/HistoryTable.jsx
+++ b/src/applications/combined-debt-portal/debt-letters/components/HistoryTable.jsx
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
-import moment from 'moment';
import { renderLetterHistory } from '../const/diary-codes';
+import { formatDate } from '../../combined/utils/helpers';
const HistoryTable = ({ history }) => {
return (
@@ -12,9 +12,7 @@ const HistoryTable = ({ history }) => {
</va-table-row>
{history.map((debt, index) => (
<va-table-row key={`${debt.date}-${index}`}>
- <span className="vads-u-width--fit">
- {moment(debt.date, 'MM-DD-YYYY').format('MMMM D, YYYY')}
- </span>
+ <span className="vads-u-width--fit">{formatDate(debt.date)}</span>
<span>
<div className="vads-u-margin-top--0">
{renderLetterHistory(debt.letterCode)}
diff --git a/src/applications/combined-debt-portal/debt-letters/containers/DebtDetails.jsx b/src/applications/combined-debt-portal/debt-letters/containers/DebtDetails.jsx
index 1adf7fb01e19..7636e4a1e241 100644
--- a/src/applications/combined-debt-portal/debt-letters/containers/DebtDetails.jsx
+++ b/src/applications/combined-debt-portal/debt-letters/containers/DebtDetails.jsx
@@ -1,7 +1,6 @@
import React, { useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
-import moment from 'moment';
import last from 'lodash/last';
import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import { head } from 'lodash';
@@ -13,6 +12,7 @@ import {
setPageFocus,
debtLettersShowLettersVBMS,
showPaymentHistory,
+ formatDate,
} from '../../combined/utils/helpers';
import { getCurrentDebt, currency } from '../utils/page';
import {
@@ -117,7 +117,7 @@ const DebtDetails = () => {
<p className="va-introtext">
Updated on
<span className="vads-u-margin-left--0p5">
- {moment(dateUpdated, 'MM-DD-YYYY').format('MMMM D, YYYY')}
+ {formatDate(dateUpdated)}
</span>
.
</p>
diff --git a/src/applications/combined-debt-portal/medical-copays/components/DownloadStatement.jsx b/src/applications/combined-debt-portal/medical-copays/components/DownloadStatement.jsx
index 119f58a0ffe0..db2c6b9ad9e2 100644
--- a/src/applications/combined-debt-portal/medical-copays/components/DownloadStatement.jsx
+++ b/src/applications/combined-debt-portal/medical-copays/components/DownloadStatement.jsx
@@ -1,9 +1,9 @@
import React from 'react';
import PropTypes from 'prop-types';
-import moment from 'moment';
-
import recordEvent from 'platform/monitoring/record-event';
import environment from 'platform/utilities/environment';
+import { parse } from 'date-fns';
+import { formatDate } from '../../combined/utils/helpers';
const handleDownloadClick = date => {
return recordEvent({
@@ -13,9 +13,8 @@ const handleDownloadClick = date => {
};
const DownloadStatement = ({ statementId, statementDate, fullName }) => {
- const formattedStatementDate = moment(statementDate, 'MM-DD-YYYY').format(
- 'MMMM D, YYYY',
- );
+ const parsedStatementDate = parse(statementDate, 'MMddyyyy', new Date());
+ const formattedStatementDate = formatDate(parsedStatementDate);
const downloadFileName = `${fullName} Veterans Medical copay statement dated ${formattedStatementDate}.pdf`;
diff --git a/src/applications/combined-debt-portal/medical-copays/components/HTMLStatementLink.jsx b/src/applications/combined-debt-portal/medical-copays/components/HTMLStatementLink.jsx
index a73de3546aa2..5ee4eaeffc70 100644
--- a/src/applications/combined-debt-portal/medical-copays/components/HTMLStatementLink.jsx
+++ b/src/applications/combined-debt-portal/medical-copays/components/HTMLStatementLink.jsx
@@ -1,14 +1,10 @@
import React from 'react';
import { Link } from 'react-router-dom';
-import moment from 'moment';
import PropTypes from 'prop-types';
import recordEvent from '~/platform/monitoring/record-event';
+import { formatDate } from '../../combined/utils/helpers';
const HTMLStatementLink = ({ id, statementDate }) => {
- const formattedStatementDate = date => {
- return moment(date, 'MM-DD-YYYY').format('MMMM D, YYYY');
- };
-
return (
<li>
<Link
@@ -18,7 +14,7 @@ const HTMLStatementLink = ({ id, statementDate }) => {
recordEvent({ event: 'cta-link-click-copay-statement-link' });
}}
>
- {formattedStatementDate(statementDate)} statement
+ {formatDate(statementDate)} statement
</Link>
</li>
);
diff --git a/src/applications/combined-debt-portal/medical-copays/components/StatementCharges.jsx b/src/applications/combined-debt-portal/medical-copays/components/StatementCharges.jsx
index 2bbe705df262..100d2f09f90f 100644
--- a/src/applications/combined-debt-portal/medical-copays/components/StatementCharges.jsx
+++ b/src/applications/combined-debt-portal/medical-copays/components/StatementCharges.jsx
@@ -1,13 +1,12 @@
import React from 'react';
import PropTypes from 'prop-types';
-import moment from 'moment';
+import { subMonths } from 'date-fns';
+import { formatDate } from '../../combined/utils/helpers';
const StatementCharges = ({ copay }) => {
const initialDate = new Date();
- const today = moment(initialDate).format('MMMM D, YYYY');
- const previousCopaysStartDate = moment(initialDate)
- .subtract(1, 'month')
- .format('MMMM D, YYYY');
+ const today = formatDate(initialDate);
+ const previousCopaysStartDate = formatDate(subMonths(initialDate, 1));
const tableData = copay.details.map(item => {
return (
diff --git a/src/applications/combined-debt-portal/medical-copays/containers/DetailPage.jsx b/src/applications/combined-debt-portal/medical-copays/containers/DetailPage.jsx
index c70552754e6b..2bde2bc5b7ab 100644
--- a/src/applications/combined-debt-portal/medical-copays/containers/DetailPage.jsx
+++ b/src/applications/combined-debt-portal/medical-copays/containers/DetailPage.jsx
@@ -25,7 +25,10 @@ const DetailPage = ({ match }) => {
const [selectedCopay] = statements?.filter(({ id }) => id === selectedId);
const title = `Copay bill for ${selectedCopay?.station.facilityName}`;
const statementDate = formatDate(selectedCopay?.pSStatementDateOutput);
- const isCurrentBalance = verifyCurrentBalance(selectedCopay?.pSStatementDate);
+ // using statementDateOutput since it has delimiters ('/') unlike pSStatementDate
+ const isCurrentBalance = verifyCurrentBalance(
+ selectedCopay?.pSStatementDateOutput,
+ );
const acctNum = selectedCopay?.pHAccountNumber
? selectedCopay?.pHAccountNumber.toString()
: selectedCopay?.pHCernerAccountNumber.toString();
diff --git a/src/applications/combined-debt-portal/medical-copays/containers/HTMLStatementPage.jsx b/src/applications/combined-debt-portal/medical-copays/containers/HTMLStatementPage.jsx
index e99a69512b54..4e77b0ae1ff1 100644
--- a/src/applications/combined-debt-portal/medical-copays/containers/HTMLStatementPage.jsx
+++ b/src/applications/combined-debt-portal/medical-copays/containers/HTMLStatementPage.jsx
@@ -3,7 +3,7 @@ import { uniqBy } from 'lodash';
import { useSelector } from 'react-redux';
import PropTypes from 'prop-types';
-import moment from 'moment';
+import { format, isValid } from 'date-fns';
import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
import {
setPageFocus,
@@ -29,9 +29,13 @@ const HTMLStatementPage = ({ match }) => {
const statementsByUniqueFacility = uniqBy(sortedStatements, 'pSFacilityNum');
const userFullName = useSelector(({ user }) => user.profile.userFullName);
const [selectedCopay] = statements.filter(({ id }) => id === selectedId);
- const statementDate = moment(selectedCopay.pSStatementDate, 'MM-DD').format(
- 'MMMM D',
- );
+
+ // using statementDateOutput since it has delimiters ('/') unlike pSStatementDate
+ const parsedStatementDate = new Date(selectedCopay.pSStatementDateOutput);
+ const statementDate = isValid(parsedStatementDate)
+ ? format(parsedStatementDate, 'MMMM d')
+ : '';
+
const title = `${statementDate} statement`;
const prevPage = `Copay bill for ${selectedCopay.station.facilityName}`;
const fullName = userFullName.middle