MHV-64020: Grouping Medications: Changes to med list (#33632)

* MHV-64020: Grouping Medications: Changes to med list * updated rxApi * feature flag updates * e2e updates updated pagination and added download pdf tests back * fixed failing unit test --------- Co-authored-by: raji.venkatesh <[email protected]>
department-of-veterans-affairs · Dec 18, 2024 · bca7c3b · bca7c3b
1 parent dea3818
commit bca7c3b
Show file tree

Hide file tree

Showing 21 changed files with 86 additions and 57 deletions.
diff --git a/src/applications/mhv-medications/actions/prescriptions.js b/src/applications/mhv-medications/actions/prescriptions.js
@@ -13,9 +13,14 @@ import {
 export const getPrescriptionsPaginatedSortedList = (
   pageNumber,
   sortEndpoint,
+  perPage,
 ) => async dispatch => {
   try {
-    const response = await getPaginatedSortedList(pageNumber, sortEndpoint);
+    const response = await getPaginatedSortedList(
+      pageNumber,
+      sortEndpoint,
+      perPage,
+    );
     dispatch({
       type: Actions.Prescriptions.GET_PAGINATED_SORTED_LIST,
       response,
@@ -33,12 +38,14 @@ export const getPaginatedFilteredList = (
   pageNumber,
   filterOption,
   sortEndpoint,
+  perPage,
 ) => async dispatch => {
   try {
     const response = await getFilteredList(
       pageNumber,
       filterOption,
       sortEndpoint,
+      perPage,
     );
     dispatch({
       type: Actions.Prescriptions.GET_PAGINATED_FILTERED_LIST,

diff --git a/src/applications/mhv-medications/api/rxApi.js b/src/applications/mhv-medications/api/rxApi.js
@@ -74,9 +74,13 @@ export const getDocumentation = id => {
 };
 
 // **Remove once filter feature is developed and live.**
-export const getPaginatedSortedList = (pageNumber = 1, sortEndpoint = '') => {
+export const getPaginatedSortedList = (
+  pageNumber = 1,
+  sortEndpoint = '',
+  perPage = 10,
+) => {
   return apiRequest(
-    `${apiBasePath}/prescriptions?page=${pageNumber}&per_page=20${sortEndpoint}`,
+    `${apiBasePath}/prescriptions?page=${pageNumber}&per_page=${perPage}${sortEndpoint}`,
     { headers },
   );
 };
@@ -85,9 +89,10 @@ export const getFilteredList = (
   pageNumber = 1,
   filterOption = '',
   sortEndpoint = '',
+  perPage = 10,
 ) => {
   return apiRequest(
-    `${apiBasePath}/prescriptions?page=${pageNumber}&per_page=20${filterOption}${sortEndpoint}`,
+    `${apiBasePath}/prescriptions?page=${pageNumber}&per_page=${perPage}${filterOption}${sortEndpoint}`,
     { headers },
   );
 };

diff --git a/src/applications/mhv-medications/components/MedicationsList/MedicationsList.jsx b/src/applications/mhv-medications/components/MedicationsList/MedicationsList.jsx
@@ -13,10 +13,9 @@ import {
 } from '../../util/constants';
 import PrescriptionPrintOnly from '../PrescriptionDetails/PrescriptionPrintOnly';
 import { fromToNumbs } from '../../util/helpers';
-import { selectFilterFlag } from '../../util/selectors';
+import { selectFilterFlag, selectGroupingFlag } from '../../util/selectors';
 
 const MAX_PAGE_LIST_LENGTH = 6;
-const perPage = 20;
 const MedicationsList = props => {
   const history = useHistory();
   const {
@@ -35,6 +34,9 @@ const MedicationsList = props => {
     state => state.rx.prescriptions?.prescriptionDetails?.prescriptionId,
   );
   const showFilterContent = useSelector(selectFilterFlag);
+  const showGroupingFlag = useSelector(selectGroupingFlag);
+
+  const perPage = showGroupingFlag ? 10 : 20;
 
   const displaynumberOfPrescriptionsSelector =
     ".no-print [data-testid='page-total-info']";

diff --git a/src/applications/mhv-medications/components/shared/ExtraDetails.jsx b/src/applications/mhv-medications/components/shared/ExtraDetails.jsx
@@ -47,7 +47,7 @@ const ExtraDetails = rx => {
               data-testid="rx-refillinprocess-info"
               className="vads-u-margin-y--0"
             >
-              We expect to fill it on{' '}
+              We expect to fill this prescription on{' '}
               {dateFormat(rx.refillDate, 'MMMM D, YYYY')}.
             </p>
             <p className="vads-u-margin-y--0" data-testid="pharmacy-phone-info">
@@ -127,8 +127,7 @@ const ExtraDetails = rx => {
       )}
       {dispStatus === dispStatusObj.nonVA && (
         <p className="vads-u-margin-y--0" data-testid="non-VA-prescription">
-          This isn’t a prescription that you filled through a VA pharmacy. You
-          can’t manage this medication in this online tool.
+          You can’t manage this medication in this online tool.
         </p>
       )}
       {dispStatus === dispStatusObj.onHold && (

diff --git a/src/applications/mhv-medications/containers/LandingPage.jsx b/src/applications/mhv-medications/containers/LandingPage.jsx
@@ -23,6 +23,7 @@ import {
 import {
   selectAllergiesFlag,
   selectFilterFlag,
+  selectGroupingFlag,
   selectRefillContentFlag,
 } from '../util/selectors';
 import ApiErrorNotification from '../components/shared/ApiErrorNotification';
@@ -59,6 +60,7 @@ const LandingPage = () => {
   const showRefillContent = useSelector(selectRefillContentFlag);
   const showAllergiesContent = useSelector(selectAllergiesFlag);
   const showFilterContent = useSelector(selectFilterFlag);
+  const showGroupingFlag = useSelector(selectGroupingFlag);
 
   const manageMedicationsHeader = useRef();
   const manageMedicationsAccordionSection = useRef();
@@ -102,6 +104,7 @@ const LandingPage = () => {
           getPrescriptionsPaginatedSortedList(
             1,
             rxListSortingOptions[defaultSelectedSortOption].API_ENDPOINT,
+            showGroupingFlag ? 10 : 20,
           ),
         )
           .then(() => setIsPrescriptionsLoading(false))
@@ -122,6 +125,7 @@ const LandingPage = () => {
             1,
             filterOptions.ALL_MEDICATIONS.url,
             sortEndpoint,
+            showGroupingFlag ? 10 : 20,
           ),
         )
           .then(() => setIsPrescriptionsLoading(false))

diff --git a/src/applications/mhv-medications/containers/Prescriptions.jsx b/src/applications/mhv-medications/containers/Prescriptions.jsx
@@ -55,6 +55,7 @@ import Alert from '../components/shared/Alert';
 import {
   selectAllergiesFlag,
   selectFilterFlag,
+  selectGroupingFlag,
   selectRefillContentFlag,
 } from '../util/selectors';
 import PrescriptionsPrintOnly from './PrescriptionsPrintOnly';
@@ -89,6 +90,7 @@ const Prescriptions = () => {
   const showAllergiesContent = useSelector(selectAllergiesFlag);
   // **Remove sort funtions and logic once filter feature is developed and live.**
   const showFilterContent = useSelector(selectFilterFlag);
+  const showGroupingContent = useSelector(selectGroupingFlag);
   const pagination = useSelector(
     showFilterContent
       ? state => state.rx.prescriptions?.prescriptionsFilteredPagination
@@ -141,7 +143,12 @@ const Prescriptions = () => {
       `${isFiltering ? 'Filtering' : 'Sorting'} your medications...`,
     );
     dispatch(
-      getPaginatedFilteredList(1, filterOptions[filterBy]?.url, sortBy),
+      getPaginatedFilteredList(
+        1,
+        filterOptions[filterBy]?.url,
+        sortBy,
+        showGroupingContent ? 10 : 20,
+      ),
     ).then(() => {
       updateLoadingStatus(false, '');
       focusElement(document.getElementById('showingRx'));
@@ -240,6 +247,7 @@ const Prescriptions = () => {
           getPrescriptionsPaginatedSortedList(
             page ?? 1,
             rxListSortingOptions[sortOption].API_ENDPOINT,
+            showGroupingContent ? 10 : 20,
           ),
         ).then(() => updateLoadingStatus(false, ''));
         if (!selectedSortOption) updateSortOption(sortOption);
@@ -315,6 +323,7 @@ const Prescriptions = () => {
             storedPageNumber,
             filterOptions[storedFilterOption]?.url,
             sortEndpoint,
+            showGroupingContent ? 10 : 20,
           ),
         ).then(() => updateLoadingStatus(false, ''));
       }

diff --git a/src/applications/mhv-medications/tests/components/shared/ExtraDetails.unit.spec.jsx b/src/applications/mhv-medications/tests/components/shared/ExtraDetails.unit.spec.jsx
@@ -40,7 +40,9 @@ describe('Medications List Card Extra Details', () => {
     const expectedDate = dateFormat(prescription.refillDate, 'MMMM D, YYYY');
     expect(
       await screen.findByTestId('rx-refillinprocess-info'),
-    ).to.contain.text(`We expect to fill it on ${expectedDate}.`);
+    ).to.contain.text(
+      `We expect to fill this prescription on ${expectedDate}.`,
+    );
   });
 
   it('displays submitted content correctly', async () => {

diff --git a/...lications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js b/...lications/mhv-medications/tests/e2e/medications-download-pdf-details-page.cypress.spec.js
@@ -6,7 +6,7 @@ import mockPrescriptionDetails from './fixtures/prescription-details.json';
 import MedicationsLandingPage from './pages/MedicationsLandingPage';
 
 describe('Medications Details Page Download', () => {
-  it.skip('visits Medications Details Page Download PDF Dropdown', () => {
+  it('visits Medications Details Page Download PDF Dropdown', () => {
     const site = new MedicationsSite();
     const listPage = new MedicationsListPage();
     const detailsPage = new MedicationsDetailsPage();

diff --git a/...applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js b/...applications/mhv-medications/tests/e2e/medications-download-pdf-list-page.cypress.spec.js
@@ -4,7 +4,7 @@ import MedicationsLandingPage from './pages/MedicationsLandingPage';
 import MedicationsListPage from './pages/MedicationsListPage';
 
 describe('Medications Download PDF on Medications List Page', () => {
-  it.skip('visits download pdf on list page', () => {
+  it('visits download pdf on list page', () => {
     const site = new MedicationsSite();
     const listPage = new MedicationsListPage();
     const landingPage = new MedicationsLandingPage();

diff --git a/...pplications/mhv-medications/tests/e2e/medications-pagination-details-page.cypress.spec.js b/...pplications/mhv-medications/tests/e2e/medications-pagination-details-page.cypress.spec.js
@@ -26,10 +26,10 @@ describe('Medications List Page Pagination', () => {
     listPage.clickGotoMedicationsLink();
     // cy.get('[href="/my-health/medications/"]').click();
     // site.loadVAPaginationPrescriptions(1, mockRxPageOne);
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, threadLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, threadLength);
     site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
-    site.verifyPaginationPrescriptionsDisplayed(21, 29, threadLength);
+    site.verifyPaginationPrescriptionsDisplayed(11, 20, threadLength);
     site.loadVAPaginationPreviousPrescriptions(1, mockRxPageOne, 20);
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, threadLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, threadLength);
   });
 });
diff --git a/...v-medications/tests/e2e/medications-sort-alphabetically-by-name-list-page.cypress.spec.js b/...v-medications/tests/e2e/medications-sort-alphabetically-by-name-list-page.cypress.spec.js
@@ -32,7 +32,7 @@ describe('Medications List Page Sort Alphabetically By Name', () => {
     });
     listPage.clickGotoMedicationsLink();
 
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, listLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, listLength);
     // site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
     listPage.selectSortDropDownOption(
       'Alphabetically by name',
@@ -41,7 +41,7 @@ describe('Medications List Page Sort Alphabetically By Name', () => {
     listPage.loadRxAfterSortAlphabeticallyByName();
     listPage.verifyPaginationDisplayedforSortAlphabeticallyByName(
       1,
-      20,
+      10,
       listLength,
     );
   });

diff --git a/...hv-medications/tests/e2e/medications-sort-default-prescriptions-list-page.cypress.spec.js b/...hv-medications/tests/e2e/medications-sort-default-prescriptions-list-page.cypress.spec.js
@@ -35,7 +35,7 @@ describe('Medications List Page Sort Alphabetically By Status', () => {
     });
     listPage.clickGotoMedicationsLink();
     // site.loadVAPaginationPrescriptions(1, mockRxPageOne);
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, listLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, listLength);
     // site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
     listPage.selectSortDropDownOption(
       'Alphabetically by status',
@@ -44,7 +44,7 @@ describe('Medications List Page Sort Alphabetically By Status', () => {
     listPage.loadRxDefaultSortAlphabeticallyByStatus();
     listPage.verifyPaginationDisplayedforSortAlphabeticallyByStatus(
       1,
-      20,
+      10,
       listLength,
     );
   });

diff --git a/...ns/mhv-medications/tests/e2e/medications-sort-last-filled-first-list-page.cypress.spec.js b/...ns/mhv-medications/tests/e2e/medications-sort-last-filled-first-list-page.cypress.spec.js
@@ -35,13 +35,13 @@ describe('Medications List Page Sort By Last Filled First', () => {
     });
     listPage.clickGotoMedicationsLink();
     // site.loadVAPaginationPrescriptions(1, mockRxPageOne);
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, listLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, listLength);
     // site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
     listPage.selectSortDropDownOption(
       'Last filled first',
       Paths.SORT_BY_LAST_FILLED,
     );
     listPage.loadRxAfterSortLastFilledFirst();
-    listPage.verifyPaginationDisplayedforSortLastFilledFirst(1, 20, listLength);
+    listPage.verifyPaginationDisplayedforSortLastFilledFirst(1, 10, listLength);
   });
 });
diff --git a/...edications/tests/e2e/medications-validate-breadcrumb-list-page-navigation.cypress.spec.js b/...edications/tests/e2e/medications-validate-breadcrumb-list-page-navigation.cypress.spec.js
@@ -27,14 +27,14 @@ describe('Medications Breadcrumb Navigation To List Page', () => {
     cy.injectAxe();
     cy.axeCheck('main');
     listPage.clickGotoMedicationsLink();
-    site.verifyPaginationPrescriptionsDisplayed(1, 20, listLength);
+    site.verifyPaginationPrescriptionsDisplayed(1, 10, listLength);
     site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
-    site.verifyPaginationPrescriptionsDisplayed(21, 29, listLength);
+    site.verifyPaginationPrescriptionsDisplayed(11, 20, listLength);
     detailsPage.clickMedicationHistoryAndDetailsLink(prescriptionDetails);
     detailsPage.clickMedicationsListPageTwoBreadcrumbsOnDetailsPage();
     listPage.verifyNavigationToListPageTwoAfterClickingBreadcrumbMedications(
-      21,
-      29,
+      11,
+      20,
       listLength,
     );
   });

diff --git a/...ations/mhv-medications/tests/e2e/medications-validate-browser-back-button.cypress.spec.js b/...ations/mhv-medications/tests/e2e/medications-validate-browser-back-button.cypress.spec.js
@@ -24,6 +24,6 @@ describe('Medications details Page Back Browser', () => {
     site.loadVAPaginationNextPrescriptions(2, mockRxPageTwo);
     detailsPage.clickMedicationHistoryAndDetailsLink(mockPrescriptionDetails);
     cy.go('back');
-    site.verifyPaginationPrescriptionsDisplayed(21, 29, threadLength);
+    site.verifyPaginationPrescriptionsDisplayed(11, 20, threadLength);
   });
 });
diff --git a/...s/tests/e2e/medications-validate-information-for-active-refill-in-process.cypress.spec.js b/...s/tests/e2e/medications-validate-information-for-active-refill-in-process.cypress.spec.js
@@ -1,6 +1,7 @@
 import MedicationsSite from './med_site/MedicationsSite';
 import MedicationsLandingPage from './pages/MedicationsLandingPage';
 import MedicationsListPage from './pages/MedicationsListPage';
+import { Data } from './utils/constants';
 
 describe('Medications List Page Information based on Medication Status', () => {
   it('verify information on list view for active refill in process', () => {
@@ -12,6 +13,8 @@ describe('Medications List Page Information based on Medication Status', () => {
     cy.injectAxe();
     cy.axeCheck('main');
     listPage.clickGotoMedicationsLink();
-    listPage.verifyInformationBasedOnStatusActiveRefillInProcess();
+    listPage.verifyInformationBasedOnStatusActiveRefillInProcess(
+      Data.ACTIVE_REFILL_IN_PROCESS,
+    );
   });
 });
diff --git a/...tions/tests/e2e/medications-validate-information-for-non-VA-prescriptions.cypress.spec.js b/...tions/tests/e2e/medications-validate-information-for-non-VA-prescriptions.cypress.spec.js
@@ -1,6 +1,7 @@
 import MedicationsSite from './med_site/MedicationsSite';
 import MedicationsLandingPage from './pages/MedicationsLandingPage';
 import MedicationsListPage from './pages/MedicationsListPage';
+import { Data } from './utils/constants';
 
 describe('Medications List Page Information based on Medication Status', () => {
   it('verify information on list view for non-VA prescriptions', () => {
@@ -12,6 +13,8 @@ describe('Medications List Page Information based on Medication Status', () => {
     cy.injectAxe();
     cy.axeCheck('main');
     listPage.clickGotoMedicationsLink();
-    listPage.verifyInformationBasedOnStatusNonVAPrescription();
+    listPage.verifyInformationBasedOnStatusNonVAPrescription(
+      Data.ACTIVE_NON_VA,
+    );
   });
 });
diff --git a/src/applications/mhv-medications/tests/e2e/pages/MedicationsListPage.js b/src/applications/mhv-medications/tests/e2e/pages/MedicationsListPage.js
@@ -326,22 +326,19 @@ class MedicationsListPage {
       .and('be.visible');
   };
 
-  verifyInformationBasedOnStatusActiveRefillInProcess = () => {
+  verifyInformationBasedOnStatusActiveRefillInProcess = text => {
     cy.get('[data-testid="rx-refillinprocess-info"]')
       .should('exist')
       .and('be.visible')
-      .and('contain', 'We expect to fill it on');
+      .and('contain', text);
   };
 
-  verifyInformationBasedOnStatusNonVAPrescription = () => {
+  verifyInformationBasedOnStatusNonVAPrescription = text => {
     cy.get('[data-testid="rx-last-filled-info"]').should('be.visible');
 
     cy.get('[data-testid="non-VA-prescription"]')
       .should('be.visible')
-      .and(
-        'contain',
-        'This isn’t a prescription that you filled through a VA pharmacy. You can’t manage this medication in this online tool.',
-      );
+      .and('contain', text);
   };
 
   verifyInformationBasedOnStatusActiveParked = () => {

diff --git a/src/applications/mhv-medications/tests/e2e/pages/MedicationsRefillPage.js b/src/applications/mhv-medications/tests/e2e/pages/MedicationsRefillPage.js
@@ -434,11 +434,7 @@ class MedicationsRefillPage {
   };
 
   clickMedicationsListPageLinkOnRefillSuccessAlertOnRefillsPage = () => {
-    cy.intercept(
-      'GET',
-      '/my_health/v1/prescriptions?page=1&per_page=20&sort[]=disp_status&sort[]=prescription_name&sort[]=dispensed_date',
-      medicationsList,
-    ).as('medicationsList');
+    cy.intercept('GET', Paths.MED_LIST, medicationsList).as('medicationsList');
     cy.intercept(
       'GET',
       '/my_health/v1/prescriptions?&sort[]=disp_status&sort[]=prescription_name&sort[]=dispensed_date&include_image=true',