[#mhv-50132] updated list page (#26135)

Co-authored-by: gerard-sullivan <[email protected]>
department-of-veterans-affairs · Oct 13, 2023 · 8129895 · 8129895
1 parent f1918b3
commit 8129895
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/src/applications/mhv/medications/components/MedicationsList/MedicationsList.jsx b/src/applications/mhv/medications/components/MedicationsList/MedicationsList.jsx
@@ -3,11 +3,12 @@ import PropTypes from 'prop-types';
 import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
 import MedicationsListCard from './MedicationsListCard';
+import { rxListSortingOptions } from '../../util/constants';
 
 const MAX_PAGE_LIST_LENGTH = 6;
 const perPage = 20;
 const MedicationsList = props => {
-  const { rxList, pagination, setCurrentPage } = props;
+  const { rxList, pagination, setCurrentPage, selectedSortOption } = props;
   const displaynumberOfPrescriptionsSelector =
     "[data-testid='page-total-info']";
 
@@ -38,7 +39,8 @@ const MedicationsList = props => {
         id="showingRx"
       >
         Showing {displayNums[0]} - {displayNums[1]} of {pagination.totalEntries}{' '}
-        medications, available to fill or refill first
+        medications,{' '}
+        {rxListSortingOptions[selectedSortOption].LABEL.toLowerCase()}
       </h2>
       <div className="rx-page-total-info vads-u-border-bottom--2px vads-u-border-color--gray-lighter" />
       <div className="vads-u-display--block vads-u-margin-top--3">
@@ -63,5 +65,6 @@ export default MedicationsList;
 MedicationsList.propTypes = {
   pagination: PropTypes.object,
   rxList: PropTypes.array,
+  selectedSortOption: PropTypes.string,
   setCurrentPage: PropTypes.func,
 };
diff --git a/src/applications/mhv/medications/components/shared/FillRefillButton.jsx b/src/applications/mhv/medications/components/shared/FillRefillButton.jsx
@@ -24,15 +24,20 @@ const FillRefillButton = rx => {
     return (
       <div>
         {success && (
-          <va-alert status="success" setFocus>
+          <va-alert status="success" setFocus aria-live="polite">
             <p className="vads-u-margin-y--0">
               We got your {dispensedDate ? 'refill' : 'fill'} request.
             </p>
           </va-alert>
         )}
         {error && (
           <>
-            <va-alert status="error" setFocus id="fill-error-alert">
+            <va-alert
+              status="error"
+              setFocus
+              id="fill-error-alert"
+              aria-live="polite"
+            >
               <p className="vads-u-margin-y--0">
                 We didn’t get your {dispensedDate ? 'refill' : 'fill'} request.
                 Try again.

diff --git a/src/applications/mhv/medications/containers/Prescriptions.jsx b/src/applications/mhv/medications/containers/Prescriptions.jsx
@@ -191,7 +191,9 @@ const Prescriptions = () => {
           header: 'Medications list',
           preface: `Showing ${
             rxList?.length
-          } medications, available to fill or refill first`,
+          } medications, ${rxListSortingOptions[
+            selectedSortOption
+          ].LABEL.toLowerCase()}`,
           list: rxList,
         },
         {
@@ -263,6 +265,7 @@ const Prescriptions = () => {
                 rxList={prescriptions}
                 pagination={pagination}
                 setCurrentPage={setCurrentPage}
+                selectedSortOption={selectedSortOption}
               />
             </div>
           ) : (

diff --git a/...plications/mhv/medications/tests/components/MedicationsList/MedicationsList.unit.spec.jsx b/...plications/mhv/medications/tests/components/MedicationsList/MedicationsList.unit.spec.jsx
@@ -27,6 +27,7 @@ describe('Medicaitons List component', () => {
         rxList={prescriptions}
         pagination={pagination}
         setCurrentPage={setCurrentPage}
+        selectedSortOption="lastFilledFirst"
       />,
       {
         initialState: state,