VYE enrollment breakdown (#30027)

* axe scan recommendations * VYE-enrollment-breakdown #comment initial push * #VYE-enrollment-breakdown #comment updated enrollmentwrapper * #VYE-enrollment-breakdown #comment removed unused vars * #VYE-enrollment-breakdown #comment send original ids in post call * updated helper file * removing comments * updated unit tests for PeriodsToVerify and PreviousEnrollmentVerifications * updated useData.js * updated getDateRanges in helper.jsx
department-of-veterans-affairs · May 28, 2024 · eb6d78f · eb6d78f
1 parent be6435f
commit eb6d78f
Show file tree

Hide file tree

Showing 9 changed files with 239 additions and 75 deletions.
diff --git a/src/applications/verify-your-enrollment/components/PeriodsToVerify.jsx b/src/applications/verify-your-enrollment/components/PeriodsToVerify.jsx
@@ -7,44 +7,34 @@ import { getPeriodsToVerify } from '../helpers';
 import Alert from './Alert';
 
 const PeriodsToVerify = ({
-  loggedInEnenrollmentData,
+  enrollmentData,
   link,
   toggleEnrollmentSuccess,
   verifyEnrollment,
 }) => {
-  const userData = loggedInEnenrollmentData;
-  const [userEnrollmentData, setUserEnrollmentData] = useState(userData);
   const [pendingEnrollments, setPendingEnrollments] = useState([]);
   const justVerified = !!toggleEnrollmentSuccess;
   const { error } = verifyEnrollment;
-  useEffect(
-    () => {
-      setUserEnrollmentData(userData);
-    },
-    [userData],
-  );
 
   useEffect(
     () => {
       if (
-        userEnrollmentData?.['vye::UserInfo']?.verifications &&
-        userEnrollmentData?.['vye::UserInfo']?.pendingVerifications
+        enrollmentData?.verifications &&
+        enrollmentData?.pendingVerifications
       ) {
-        const { pendingVerifications } = userEnrollmentData?.['vye::UserInfo'];
-
+        const { pendingVerifications } = enrollmentData;
         // add all data to be verified into single array
         setPendingEnrollments(pendingVerifications);
       }
     },
-    [userEnrollmentData],
+    [enrollmentData],
   );
 
   return (
     <>
       {error && <Alert status="error" message="Oops Something went wrong" />}
       <div id="verifications-pending-alert">
-        {userEnrollmentData?.['vye::UserInfo']?.pendingVerifications?.length >
-          0 && (
+        {enrollmentData?.pendingVerifications?.length > 0 && (
           <va-alert
             close-btn-aria-label="Close notification"
             status="info"
@@ -64,20 +54,14 @@ const PeriodsToVerify = ({
             </div>
           </va-alert>
         )}
-        {/* 
-                will need to update logic here/ currently this would not work in prod
-                as it would always show the verified success statement if there are no pending
-                enrollments even if the user didn't just verify
-            */}
-        {userEnrollmentData?.['vye::UserInfo']?.pendingVerifications?.length ===
-          0 &&
+
+        {enrollmentData?.pendingVerifications?.length === 0 &&
           justVerified && (
             <div>
               <VerifiedSuccessStatement />
             </div>
           )}
-        {userEnrollmentData?.['vye::UserInfo']?.pendingVerifications?.length ===
-          0 &&
+        {enrollmentData?.pendingVerifications?.length === 0 &&
           !justVerified && (
             <div className="vads-u-margin-top--2">
               <UpToDateVerificationStatement />
@@ -89,15 +73,12 @@ const PeriodsToVerify = ({
 };
 
 const mapStateToProps = state => ({
-  loggedInEnenrollmentData: state.personalInfo.personalInfo,
   verifyEnrollment: state.verifyEnrollment,
-  // verificationsResponse: state.verificationsReducer.verificationsReducer,
 });
 
 PeriodsToVerify.propTypes = {
   link: PropTypes.func,
   loading: PropTypes.bool,
-  loggedInEnenrollmentData: PropTypes.object,
   toggleEnrollmentSuccess: PropTypes.bool,
   verifyEnrollment: PropTypes.object,
 };

diff --git a/src/applications/verify-your-enrollment/components/PreviousEnrollmentVerifications.jsx b/src/applications/verify-your-enrollment/components/PreviousEnrollmentVerifications.jsx
@@ -18,14 +18,12 @@ const PreviousEnrollmentVerifications = ({ enrollmentData }) => {
   const [subsetEnd, setSubsetEnd] = useState(0);
 
   const totalEnrollmentVerificationsCount = Object.keys(
-    combineEnrollmentsWithStartMonth(
-      enrollmentData?.['vye::UserInfo']?.verifications ?? {},
-    ),
+    combineEnrollmentsWithStartMonth(enrollmentData?.verifications ?? {}),
   ).length;
 
   const totalEnrollmentPendingVerificationsCount = Object.keys(
     combineEnrollmentsWithStartMonth(
-      enrollmentData?.['vye::UserInfo']?.pendingVerifications ?? {},
+      enrollmentData?.pendingVerifications ?? {},
     ),
   ).length;
   // get count of verified and unverified enrollments (Grouped by start month)
@@ -169,16 +167,14 @@ const PreviousEnrollmentVerifications = ({ enrollmentData }) => {
   useEffect(
     () => {
       const allEnrollments = [];
-      if (
-        userEnrollmentData?.['vye::UserInfo']?.pendingVerifications?.length > 0
-      ) {
-        const { pendingVerifications } = userEnrollmentData?.['vye::UserInfo'];
+      if (userEnrollmentData?.pendingVerifications?.length > 0) {
+        const { pendingVerifications } = userEnrollmentData;
         pendingVerifications.forEach(pendingAward => {
           allEnrollments.push(pendingAward);
         });
       }
-      if (userEnrollmentData?.['vye::UserInfo']?.verifications?.length > 0) {
-        const { verifications } = userEnrollmentData?.['vye::UserInfo'];
+      if (userEnrollmentData?.verifications?.length > 0) {
+        const { verifications } = userEnrollmentData;
         verifications.forEach(award => {
           allEnrollments.push(award);
         });

diff --git a/src/applications/verify-your-enrollment/constants/mockData.js b/src/applications/verify-your-enrollment/constants/mockData.js
@@ -33,6 +33,14 @@ export const UPDATED_USER_MOCK_DATA = {
         monthlyRate: 600.0,
         caseTrace: 'CASE 1b',
       },
+      {
+        awardId: 6,
+        actBegin: '2024-03-25',
+        actEnd: '2024-04-30',
+        numberHours: 10,
+        monthlyRate: 600.0,
+        caseTrace: 'CASE 1b',
+      },
       {
         awardId: 2,
         actBegin: '2024-03-25',
@@ -44,7 +52,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         awardId: 3,
         actBegin: '2024-02-05',
-        actEnd: '2024-02-31',
+        actEnd: '2024-02-29',
         numberHours: 12,
         monthlyRate: 1400.0,
         caseTrace: 'CASE 7',
@@ -84,7 +92,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2019-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2019-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -93,7 +101,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2018-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2018-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -102,7 +110,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2017-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2017-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -111,7 +119,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2016-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2016-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -120,7 +128,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2015-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2015-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -129,7 +137,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2014-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2014-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -138,7 +146,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2013-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2013-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -147,7 +155,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2012-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2012-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -156,7 +164,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2011-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2011-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',
@@ -165,7 +173,7 @@ export const UPDATED_USER_MOCK_DATA = {
       {
         transactDate: '2023-03-01',
         actBegin: '2010-02-06',
-        actEnd: '2023-02-28',
+        actEnd: '2010-02-28',
         numberHours: 6,
         monthlyRate: 800.0,
         paymentDate: '2023-03-01',

diff --git a/src/applications/verify-your-enrollment/containers/EnrollmentVerificationPageWrapper.jsx b/src/applications/verify-your-enrollment/containers/EnrollmentVerificationPageWrapper.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import { getToggleEnrollmentSuccess } from '../selectors/getToggleEnrollmentSuccess';
@@ -20,19 +20,111 @@ import MoreInfoCard from '../components/MoreInfoCard';
 import NeedHelp from '../components/NeedHelp';
 import Loader from '../components/Loader';
 import PeriodsToVerify from '../components/PeriodsToVerify';
+import { isSameMonth, getDateRangesBetween } from '../helpers';
 
 const EnrollmentVerificationPageWrapper = ({ children }) => {
   useScrollToTop();
-  const {
-    personalInfo,
-    expirationDate,
-    updated,
-    month,
-    day,
-    loading,
-  } = useData();
-
+  const { expirationDate, updated, month, day, loading } = useData();
+  const response = useSelector(state => state.personalInfo);
+  const personalInfo = response?.personalInfo?.['vye::UserInfo'];
   const toggleEnrollmentSuccess = useSelector(getToggleEnrollmentSuccess);
+  const enrollmentData = personalInfo;
+  const [expandedEnrollmentData, setExpandedEnrollmentData] = useState({});
+
+  useEffect(
+    () => {
+      const expandAllEnrollments = () => {
+        /*
+          make sure the begin date and end date are in the same month,
+          if not then expand the enrollment period for each month
+          between the begin and end dates of the enrollment
+        */
+
+        const pending = personalInfo?.pendingVerifications;
+        const verified = personalInfo?.verifications;
+
+        const expandedPending = [];
+        const expendedVerified = [];
+
+        verified.forEach(enrollment => {
+          if (enrollment.actBegin !== null && enrollment.actEnd !== null) {
+            if (!isSameMonth(enrollment.actBegin, enrollment.actEnd)) {
+              const expandedMonths = getDateRangesBetween(
+                enrollment.actBegin,
+                enrollment.actEnd,
+              );
+              expandedMonths.forEach(period => {
+                const [startDate, endDate] = period.split(' - ');
+                expendedVerified.push({
+                  actBegin: startDate,
+                  actEnd: endDate,
+                  paymentDate: enrollment.paymentDate,
+                  transactDate: enrollment.transactDate,
+                  caseTrace: enrollment.caseTrace,
+                  monthlyRate: enrollment.monthlyRate,
+                  numberHours: enrollment.numberHours,
+                  sourceInd: enrollment.sourceInd,
+                  awardId: enrollment.awardId,
+                });
+              });
+            } else {
+              expendedVerified.push({ ...enrollment });
+            }
+          } else {
+            expendedVerified.push({ ...enrollment });
+          }
+        });
+
+        pending.forEach(enrollment => {
+          if (!isSameMonth(enrollment.actBegin, enrollment.actEnd)) {
+            const expandedMonths = getDateRangesBetween(
+              enrollment.actBegin,
+              enrollment.actEnd,
+            );
+            expandedMonths.forEach(period => {
+              const [startDate, endDate] = period.split(' - ');
+              expandedPending.push({
+                actBegin: startDate,
+                actEnd: endDate,
+                paymentDate: enrollment.paymentDate,
+                transactDate: enrollment.transactDate,
+                caseTrace: enrollment.caseTrace,
+                monthlyRate: enrollment.monthlyRate,
+                numberHours: enrollment.numberHours,
+                sourceInd: enrollment.sourceInd,
+                awardId: enrollment.awardId,
+              });
+            });
+          } else {
+            expandedPending.push({
+              actBegin: enrollment.actBegin,
+              actEnd: enrollment.actEnd,
+              paymentDate: enrollment.paymentDate,
+              transactDate: enrollment.transactDate,
+              caseTrace: enrollment.caseTrace,
+              monthlyRate: enrollment.monthlyRate,
+              numberHours: enrollment.numberHours,
+              sourceInd: enrollment.sourceInd,
+              awardId: enrollment.awardId,
+            });
+          }
+        });
+
+        const tempEnrollments = {
+          ...personalInfo,
+          pendingVerifications: expandedPending,
+          verifications: expendedVerified,
+        };
+
+        /* eslint-disable no-unused-expressions */
+        setExpandedEnrollmentData(tempEnrollments);
+      };
+
+      personalInfo && expandAllEnrollments();
+    },
+    [enrollmentData],
+  );
+
   return (
     <>
       <div name="topScrollElement" />
@@ -50,7 +142,7 @@ const EnrollmentVerificationPageWrapper = ({ children }) => {
             ) : (
               <>
                 <PeriodsToVerify
-                  enrollmentData={personalInfo}
+                  enrollmentData={expandedEnrollmentData}
                   link={() => (
                     <PageLink
                       linkText="Start enrollment verification"
@@ -78,7 +170,9 @@ const EnrollmentVerificationPageWrapper = ({ children }) => {
                 />
               </>
             )}
-            <PreviousEnrollmentVerifications enrollmentData={personalInfo} />
+            <PreviousEnrollmentVerifications
+              enrollmentData={expandedEnrollmentData}
+            />
             <MoreInfoCard
               marginTop="7"
               linkText="Manage your Montgomery GI Bill benefits information"