mhv-65032 various ui fixes (#33491)

* mhv-65032 various ui fixes * mhv-65032 fixed linter issue * mhv-65032 PR comment fixes
department-of-veterans-affairs · Dec 12, 2024 · 1410c9f · 1410c9f
1 parent d0ca174
commit 1410c9f
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 30 deletions.
diff --git a/src/applications/mhv-medical-records/actions/downloads.js b/src/applications/mhv-medical-records/actions/downloads.js
@@ -55,10 +55,18 @@ export const genAndDownloadCCD = (firstName, lastName) => async dispatch => {
   }
 };
 
-export const updateReportDateRange = (fromDate, toDate) => async dispatch => {
+export const updateReportDateRange = (
+  option,
+  fromDate,
+  toDate,
+) => async dispatch => {
   dispatch({
     type: Actions.Downloads.SET_DATE_FILTER,
-    response: `${fromDate}<->${toDate}`,
+    response: {
+      option,
+      fromDate,
+      toDate,
+    },
   });
 };
 

diff --git a/src/applications/mhv-medical-records/components/DownloadRecords/DowloadDateRange.jsx b/src/applications/mhv-medical-records/components/DownloadRecords/DowloadDateRange.jsx
@@ -29,10 +29,13 @@ const DownloadDateRange = () => {
 
       setSelectionError(null);
       setSelectedDate(e.detail.value);
-      if (e.detail.value !== 'custom') {
+      if (e.detail.value === 'any') {
+        dispatch(updateReportDateRange('any', 'any', 'any'));
+      } else if (e.detail.value !== 'custom') {
         const currentDate = new Date();
         dispatch(
           updateReportDateRange(
+            e.detail.value,
             format(subMonths(currentDate, e.detail.value), 'yyyy-MM-dd'),
             format(currentDate, 'yyyy-MM-dd'),
           ),
@@ -45,7 +48,7 @@ const DownloadDateRange = () => {
   useEffect(
     () => {
       if (customFromDate !== '' && customToDate !== '') {
-        dispatch(updateReportDateRange(customFromDate, customToDate));
+        dispatch(updateReportDateRange('custom', customFromDate, customToDate));
       }
     },
     [customFromDate, customToDate],
@@ -73,6 +76,7 @@ const DownloadDateRange = () => {
           value=""
           error={selectionError}
         >
+          <option value="any">Any</option>
           <option value={3}>Last 3 months</option>
           <option value={6}>Last 6 months</option>
           <option value={12}>Last 12 months</option>
@@ -86,10 +90,12 @@ const DownloadDateRange = () => {
             required="true"
             error={customFromError}
             onDateChange={e => {
-              const [year, month, day] = e.target.value.split('-');
-              if (parseInt(year, 10) >= 1900 && month && day) {
-                setCustomFromError(null);
-                setCustomFromDate(e.target.value);
+              if (e.target.value) {
+                const [year, month, day] = e.target.value?.split('-');
+                if (parseInt(year, 10) >= 1900 && month && day) {
+                  setCustomFromError(null);
+                  setCustomFromDate(e.target.value);
+                }
               }
             }}
           />

diff --git a/src/applications/mhv-medical-records/components/DownloadRecords/DownloadFileType.jsx b/src/applications/mhv-medical-records/components/DownloadRecords/DownloadFileType.jsx
@@ -21,6 +21,7 @@ import { getTxtContent } from '../../util/txtHelpers/blueButton';
 import { getBlueButtonReportData } from '../../actions/blueButtonReport';
 import { generateBlueButtonData } from '../../util/pdfHelpers/blueButton';
 import { clearAlerts } from '../../actions/alerts';
+import { Actions } from '../../util/actionTypes';
 
 const DownloadFileType = props => {
   const { runningUnitTest = false } = props;
@@ -70,12 +71,15 @@ const DownloadFileType = props => {
     [dateFilter, history, recordFilter],
   );
 
-  const [filterFromDate, filterToDate] = useMemo(
-    () => {
-      return dateFilter ? dateFilter.split('<->') : [null, null];
-    },
-    [dateFilter],
-  );
+  const filterByDate = recDate => {
+    if (dateFilter.option === 'any') {
+      return true;
+    }
+    return (
+      isBefore(new Date(dateFilter.fromDate), new Date(recDate)) &&
+      isAfter(new Date(dateFilter.toDate), new Date(recDate))
+    );
+  };
 
   /**
    * True if all the records that were specified in the filters have been fetched, otherwise false.
@@ -145,13 +149,6 @@ const DownloadFileType = props => {
 
   const recordData = useMemo(
     () => {
-      const filterByDate = recDate => {
-        return (
-          isBefore(new Date(filterFromDate), new Date(recDate)) &&
-          isAfter(new Date(filterToDate), new Date(recDate))
-        );
-      };
-
       if (isDataFetched) {
         return {
           labsAndTests: recordFilter?.includes('labTests')
@@ -198,9 +195,8 @@ const DownloadFileType = props => {
       return null;
     },
     [
+      filterByDate,
       isDataFetched,
-      filterFromDate,
-      filterToDate,
       recordFilter,
       labsAndTests,
       notes,
@@ -251,7 +247,13 @@ const DownloadFileType = props => {
           name,
           dob,
         };
-        makePdf(pdfName, pdfData, title, runningUnitTest, 'blueButtonReport');
+        makePdf(
+          pdfName,
+          pdfData,
+          title,
+          runningUnitTest,
+          'blueButtonReport',
+        ).then(() => dispatch({ type: Actions.Downloads.BB_SUCCESS }));
       }
     },
     [dispatch, dob, isDataFetched, name, recordData, runningUnitTest, user],
@@ -271,7 +273,9 @@ const DownloadFileType = props => {
         )}`;
         const content = getTxtContent(recordData, user);
 
-        generateTextFile(content, pdfName, user);
+        generateTextFile(content, pdfName, user).then(() =>
+          dispatch({ type: Actions.Downloads.BB_SUCCESS }),
+        );
       }
     },
     [dispatch, isDataFetched, recordData, user],

diff --git a/src/applications/mhv-medical-records/components/DownloadRecords/DownloadRecordType.jsx b/src/applications/mhv-medical-records/components/DownloadRecords/DownloadRecordType.jsx
@@ -2,9 +2,10 @@ import {
   VaCheckbox,
   VaButtonPair,
 } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
-import React, { useState } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { format } from 'date-fns';
 import NeedHelpSection from './NeedHelpSection';
 import { updateReportRecordType } from '../../actions/downloads';
 
@@ -24,6 +25,8 @@ const DownloadRecordType = () => {
   const [demoCheck, setDemoCheck] = useState(false);
   const [milServCheck, setMilServCheck] = useState(false);
 
+  const dateFilter = useSelector(state => state.mr.downloads?.dateFilter);
+
   const [selectedRecords, setSelectedRecords] = useState([]);
   const [selectionError, setSelectionError] = useState(null);
 
@@ -76,6 +79,28 @@ const DownloadRecordType = () => {
     setSelectedRecords(newArray);
   };
 
+  useEffect(
+    () => {
+      if (!dateFilter) {
+        history.push('/download/date-range');
+      }
+    },
+    [dateFilter],
+  );
+
+  const selectedDateRange = useMemo(
+    () => {
+      if (dateFilter?.option === 'any') {
+        return 'Any';
+      }
+      if (dateFilter?.option === 'custom') {
+        return 'Custom';
+      }
+      return `Last ${dateFilter?.option} months`;
+    },
+    [dateFilter],
+  );
+
   return (
     <div>
       <h1>Select records and download report</h1>
@@ -93,8 +118,13 @@ const DownloadRecordType = () => {
       <h2>Select types of records to include</h2>
       <div className="vads-u-border-top--1px vads-u-border-bottom--1px vads-u-border-color--gray-light">
         <p>
-          Date range: <strong>Last 3 months</strong> (January 1, 2024 to March
-          31, 2024)
+          Date range: <strong>{selectedDateRange}</strong>{' '}
+          {dateFilter && dateFilter?.option !== 'any'
+            ? `(${format(new Date(dateFilter?.fromDate), 'PPP')} to ${format(
+                new Date(dateFilter?.toDate),
+                'PPP',
+              )})`
+            : ''}
         </p>
       </div>
       <div className="vads-u-margin-bottom--3">

diff --git a/src/applications/mhv-medical-records/containers/DownloadReportPage.jsx b/src/applications/mhv-medical-records/containers/DownloadReportPage.jsx
@@ -32,6 +32,8 @@ import { clearAlerts } from '../actions/alerts';
 import { generateSelfEnteredData } from '../util/pdfHelpers/sei';
 import { UNKNOWN } from '../util/constants';
 import { genAndDownloadCCD } from '../actions/downloads';
+import DownloadSuccessAlert from '../components/shared/DownloadSuccessAlert';
+import { Actions } from '../util/actionTypes';
 
 const DownloadReportPage = ({ runningUnitTest }) => {
   const dispatch = useDispatch();
@@ -43,6 +45,9 @@ const DownloadReportPage = ({ runningUnitTest }) => {
   const generatingCCD = useSelector(state => state.mr.downloads.generatingCCD);
   const ccdError = useSelector(state => state.mr.downloads.error);
   const userName = useSelector(state => state.user.profile.userFullName);
+  const successfulDownload = useSelector(
+    state => state.mr.downloads.downloadSuccess,
+  );
 
   const activityJournal = useSelector(
     state => state.mr.selfEntered.activityJournal,
@@ -75,6 +80,15 @@ const DownloadReportPage = ({ runningUnitTest }) => {
     false,
   );
 
+  useEffect(
+    () => {
+      return () => {
+        dispatch({ type: Actions.Downloads.BB_CLEAR_ALERT });
+      };
+    },
+    [dispatch],
+  );
+
   const generatePdf = useCallback(
     async () => {
       setSelfEnteredInfoRequested(true);
@@ -244,6 +258,9 @@ const DownloadReportPage = ({ runningUnitTest }) => {
           23, 2024
         </p>
       </div>
+      {successfulDownload === true && (
+        <DownloadSuccessAlert className="vads-u-margin-bottom--1" />
+      )}
       <h2>Download your VA Blue Button report</h2>
       <p className="vads-u-margin--0 vads-u-margin-bottom--1">
         First, select the types of records you want in your report. Then
@@ -285,7 +302,7 @@ const DownloadReportPage = ({ runningUnitTest }) => {
       <va-accordion bordered>
         <va-accordion-item
           bordered="true"
-          header="Continuity of care document (VA Health Summary)"
+          header="Continuity of Care Document (VA Health Summary)"
           data-testid="ccdAccordionItem"
         >
           <p className="vads-u-margin--0">

diff --git a/src/applications/mhv-medical-records/reducers/downloads.js b/src/applications/mhv-medical-records/reducers/downloads.js
@@ -59,6 +59,18 @@ export const downloadsReducer = (state = initialState, action) => {
         recordFilter: action.response,
       };
     }
+    case Actions.Downloads.BB_SUCCESS: {
+      return {
+        ...state,
+        downloadSuccess: true,
+      };
+    }
+    case Actions.Downloads.BB_CLEAR_ALERT: {
+      return {
+        ...state,
+        downloadSuccess: false,
+      };
+    }
     default: {
       return { ...state };
     }

diff --git a/src/applications/mhv-medical-records/util/actionTypes.js b/src/applications/mhv-medical-records/util/actionTypes.js
@@ -30,6 +30,8 @@ export const Actions = {
     CCD_GENERATION_ERROR: 'MR_CCD_GENERATION_ERROR',
     SET_DATE_FILTER: 'MR_DOWNLOADS_DATE_FILTER',
     SET_RECORD_FILTER: 'MR_DOWNLOADS_RECORDS_FILTER',
+    BB_SUCCESS: 'MR_DOWNLOADS_BB_SUCCESS',
+    BB_CLEAR_ALERT: 'MR_DOWNLOADS_CLEAR_ALERT',
   },
   Vaccines: {
     GET: 'MR_VACCINES_GET',