Merge branch 'main' into create-interstitial

package.json

@@ -263,7 +263,7 @@
     "@datadog/browser-rum": "^4.49.0",
     "@department-of-veterans-affairs/component-library": "^46.4.0",
     "@department-of-veterans-affairs/css-library": "^0.12.0",
-    "@department-of-veterans-affairs/formation": "11.0.23",
+    "@department-of-veterans-affairs/formation": "11.0.26",
     "@department-of-veterans-affairs/react-jsonschema-form": "^1.2.5",
     "@department-of-veterans-affairs/va-forms-system-core": "1.6.1",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",

src/applications/benefit-eligibility-questionnaire/containers/ConfirmationPage.jsx

@@ -121,6 +121,7 @@ export class ConfirmationPage extends React.Component {
     if (key === 'All') {
       this.setState(() => ({
         benefits: this.props.results.data,
+        resultsCount: this.props.results.data.length,
       }));
       return;
     }

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;
     });
   });

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),
   );
 };
 

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>

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}
     </>

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)}

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>

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`;
 

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>
   );

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 (