Skip to content
This repository is currently being migrated. It's locked while the migration is in progress.

Commit 7b1fbc9

Browse files
ckeif-iatckeif-iat
authored
138106: Hanging links in medications (#43869)
* replace links in MMI components with hanging tabs * fix e2e test * cleanup * fix accidental data-testid change
1 parent e54b979 commit 7b1fbc9

14 files changed

Lines changed: 447 additions & 252 deletions

‎src/applications/mhv-medications/components/shared/InnerNavigation.jsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import React, { useEffect, useState } from 'react';
2+
import { Link, useLocation } from 'react-router-dom-v5-compat';
3+
import {
4+
InnerNavigationPaths,
5+
MOBILE_BREAKPOINT_PX,
6+
Paths,
7+
} from '../../util/constants';
8+
import { dataDogActionNames } from '../../util/dataDogConstants';
9+
10+
const MOBILE_BREAKPOINT = `(max-width: ${MOBILE_BREAKPOINT_PX}px)`;
11+
12+
const innerNavDDActions = {
13+
[Paths.LANDING]: {
14+
[Paths.HISTORY]:
15+
dataDogActionNames.refillPage
16+
.GO_TO_REVIEW_AND_PRINT_MEDICATION_HISTORY_LINK,
17+
[Paths.IN_PROGRESS]:
18+
dataDogActionNames.refillPage.GO_TO_YOUR_IN_PROGRESS_MEDICATIONS_LINK,
19+
},
20+
[Paths.HISTORY]: {
21+
[Paths.LANDING]:
22+
dataDogActionNames.medicationsHistoryPage.REFILL_MEDICATIONS_LINK,
23+
[Paths.IN_PROGRESS]:
24+
dataDogActionNames.medicationsHistoryPage
25+
.GO_TO_YOUR_IN_PROGRESS_MEDICATIONS_LINK,
26+
},
27+
[Paths.IN_PROGRESS]: {
28+
[Paths.LANDING]: dataDogActionNames.inProgressPage.REFILL_MEDICATIONS_LINK,
29+
[Paths.HISTORY]:
30+
dataDogActionNames.inProgressPage
31+
.GO_TO_REVIEW_AND_PRINT_MEDICATION_HISTORY_LINK,
32+
},
33+
};
34+
35+
const InnerNavigation = () => {
36+
const location = useLocation();
37+
const [isMobile, setIsMobile] = useState(
38+
window.matchMedia(MOBILE_BREAKPOINT).matches,
39+
);
40+
41+
// Update the link text when the screen changes between mobile and desktop
42+
useEffect(() => {
43+
const mql = window.matchMedia(MOBILE_BREAKPOINT);
44+
45+
const handleChange = e => setIsMobile(e.matches);
46+
mql.addEventListener('change', handleChange);
47+
48+
return () => mql.removeEventListener('change', handleChange);
49+
}, []);
50+
51+
const isActiveLink = path => {
52+
if (location.pathname === '/') {
53+
return path.path === Paths.LANDING;
54+
}
55+
return location.pathname === path.path;
56+
};
57+
58+
const currentPath =
59+
location.pathname === '/' ? Paths.LANDING : location.pathname;
60+
61+
return (
62+
<div
63+
className="
64+
do-not-print
65+
vads-u-margin-top--3
66+
vads-l-row
67+
"
68+
>
69+
<div
70+
className="
71+
vads-u-border-bottom--1px
72+
vads-u-border-color--gray-medium
73+
vads-u-display--flex
74+
vads-u-flex-wrap--wrap
75+
vads-u-flex--fill
76+
vads-u-width--full
77+
mobile-lg:vads-u-flex--auto
78+
"
79+
>
80+
{InnerNavigationPaths.map((innerNav, i) => (
81+
<div
82+
key={innerNav.path}
83+
data-testid={innerNav.datatestid}
84+
className={`
85+
vads-u-font-size--lg
86+
vads-u-display--flex
87+
${i < InnerNavigationPaths.length - 1 && 'vads-u-margin-right--2'}
88+
vads-u-justify-content--center
89+
vads-u-padding-x--1p5
90+
${
91+
isActiveLink(innerNav)
92+
? 'vads-u-border-bottom--5px vads-u-border-color--primary'
93+
: ''
94+
}
95+
`}
96+
>
97+
<Link
98+
data-dd-action-name={
99+
!isActiveLink(innerNav)
100+
? innerNavDDActions[currentPath]?.[innerNav.path]
101+
: undefined
102+
}
103+
className={`inner-nav-link hide-visited-link vads-u-text-decoration--none ${
104+
isActiveLink(innerNav)
105+
? 'vads-u-font-weight--bold vads-u-color--base'
106+
: ''
107+
}`}
108+
to={innerNav.path}
109+
aria-current={isActiveLink(innerNav) ? 'page' : undefined}
110+
aria-label={innerNav.label}
111+
>
112+
{isMobile && innerNav.mobileLabel
113+
? innerNav.mobileLabel
114+
: innerNav.label}
115+
</Link>
116+
</div>
117+
))}
118+
</div>
119+
</div>
120+
);
121+
};
122+
123+
export default InnerNavigation;

‎src/applications/mhv-medications/containers/MedicationHistory.jsx‎

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useEffect, useMemo, useState } from 'react';
2-
import { Link, useNavigate } from 'react-router-dom-v5-compat';
2+
import { useNavigate } from 'react-router-dom-v5-compat';
33
import { useDispatch, useSelector } from 'react-redux';
44
import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
55
import useAcceleratedData from '~/platform/mhv/hooks/useAcceleratedData';
@@ -10,7 +10,7 @@ import ApiErrorNotification from '../components/shared/ApiErrorNotification';
1010
import MedicationsList from '../components/MedicationsList/MedicationsList';
1111
import MedicationsListSort from '../components/MedicationsList/MedicationsListSort';
1212
import { useFetchMedicationHistory } from '../hooks/MedicationHistory/useFetchMedicationHistory';
13-
import { pageType, dataDogActionNames } from '../util/dataDogConstants';
13+
import { pageType } from '../util/dataDogConstants';
1414
import {
1515
rxListSortingOptions,
1616
rxListSortingOptionsV2,
@@ -25,6 +25,7 @@ import { setSortOption, setFilterOption } from '../redux/preferencesSlice';
2525
import EmptyPrescriptionContent from '../components/MedicationsList/EmptyPrescriptionContent';
2626
import NoFilterMatches from '../components/MedicationsList/NoFilterMatches';
2727
import MedicationHistoryFilter from '../components/MedicationHistory/MedicationHistoryFilter';
28+
import InnerNavigation from '../components/shared/InnerNavigation';
2829

2930
import { useGetAllergiesQuery } from '../api/allergiesApi';
3031
import { getPrescriptionsExportList } from '../api/prescriptionsApi';
@@ -229,9 +230,6 @@ const MedicationHistory = () => {
229230
</div>
230231
);
231232
}
232-
if (prescriptionsApiError) {
233-
return <ApiErrorNotification errorType="access" content="medications" />;
234-
}
235233
if (noMedications) {
236234
return <EmptyPrescriptionContent />;
237235
}
@@ -280,26 +278,10 @@ const MedicationHistory = () => {
280278
return (
281279
<div>
282280
<h1 data-testid="medication-history-heading">Medication history</h1>
283-
<Link
284-
data-testid="in-progress-link"
285-
to="/in-progress"
286-
data-dd-action-name={
287-
dataDogActionNames.medicationsHistoryPage
288-
.GO_TO_YOUR_IN_PROGRESS_MEDICATIONS_LINK
289-
}
290-
>
291-
Go to your in-progress medications
292-
</Link>
293-
<span className="vads-u-margin-x--1">|</span>
294-
<Link
295-
data-testid="refill-link"
296-
to="/"
297-
data-dd-action-name={
298-
dataDogActionNames.medicationsHistoryPage.REFILL_MEDICATIONS_LINK
299-
}
300-
>
301-
Refill medications
302-
</Link>
281+
{prescriptionsApiError && (
282+
<ApiErrorNotification errorType="access" content="medications" />
283+
)}
284+
<InnerNavigation />
303285
{renderContent()}
304286
<MedicationResources page={pageType.HISTORY} headingLevel={2} />
305287
<NeedHelp page={pageType.HISTORY} headingLevel={2} />

‎src/applications/mhv-medications/containers/PrescriptionsInProgress.jsx‎

Lines changed: 6 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import React, { useEffect } from 'react';
2-
import { Link } from 'react-router-dom-v5-compat';
32
import { focusElement } from '@department-of-veterans-affairs/platform-utilities/ui';
43
import InProgressMedicationsProcessList from '../components/PrescriptionsInProgress/InProgressMedicationsProcessList';
54
import NeedHelp from '../components/shared/NeedHelp';
65
import ApiErrorNotification from '../components/shared/ApiErrorNotification';
76
import useFetchPrescriptionsInProgress from '../hooks/PrescriptionsInProgress/useFetchPrescriptionsInProgress';
8-
import { pageType, dataDogActionNames } from '../util/dataDogConstants';
7+
import { pageType } from '../util/dataDogConstants';
98
import InProgressMedicationsEmptyView from '../components/PrescriptionsInProgress/InProgressMedicationsEmptyView';
109
import MedicationResources from '../components/shared/MedicationResources';
10+
import InnerNavigation from '../components/shared/InnerNavigation';
1111

1212
const PrescriptionsInProgress = () => {
1313
const {
@@ -32,10 +32,6 @@ const PrescriptionsInProgress = () => {
3232
);
3333
}
3434

35-
if (prescriptionsApiError) {
36-
return <ApiErrorNotification errorType="access" content="medications" />;
37-
}
38-
3935
if (
4036
inProgress.length === 0 &&
4137
shipped.length === 0 &&
@@ -64,31 +60,15 @@ const PrescriptionsInProgress = () => {
6460
<h1 data-testid="in-progress-medications-heading">
6561
In-progress medications
6662
</h1>
63+
{prescriptionsApiError && (
64+
<ApiErrorNotification errorType="access" content="medications" />
65+
)}
66+
<InnerNavigation />
6767
<p>
6868
Medications that are shipped will remain in this list for 15 days from
6969
the date of shipping. To review all your medications, go to your
7070
medication history.
7171
</p>
72-
<Link
73-
data-testid="history-link"
74-
to="/history"
75-
data-dd-action-name={
76-
dataDogActionNames.inProgressPage
77-
.GO_TO_REVIEW_AND_PRINT_MEDICATION_HISTORY_LINK
78-
}
79-
>
80-
Review and print list of medications
81-
</Link>
82-
<span className="vads-u-margin-x--1">|</span>
83-
<Link
84-
data-testid="refill-link"
85-
to="/"
86-
data-dd-action-name={
87-
dataDogActionNames.inProgressPage.REFILL_MEDICATIONS_LINK
88-
}
89-
>
90-
Refill medications
91-
</Link>
9272
{renderContent()}
9373
<MedicationResources page={pageType.IN_PROGRESS} headingLevel={2} />
9474
<NeedHelp page={pageType.IN_PROGRESS} headingLevel={2} />

0 commit comments

Comments
 (0)