Mhv 58096/revert-rx-breadcrumbs (#29667)

* removed code + update breadcrumb * added link for mobile * removed link * updated links * updated tests * update tests * cypress fixes * MHV-58096/revert-rx-breadcrumbs * Direct Veterans to call their provider/facility to update contact (#29623) * direct Veterans to call their provider/facility to update contact * update unit test * adjusting for tests * adjusting for tests * adjusting for tests? * change href to <a> element * fix for href * fix for test * fix for test? * add accessibility items * swap out va-link for a element * update link * Vye 381 login accounts alert (#29659) * VYE-381 added login alert for direct dopist when user login without using ID.me * fixed failling usint tests * fixed failling cypress tests * 82689 - [CDP] - Aria Va-Row Attribute Missing Breaking Tests (#29672) * Remove table role as there is no precedent in app for using it with platform component and any combination of rowgroup and row roles inside it did not satisfy test. * Fix broken unit test * About Medications page: In the event the API call fails, we need to p… (#29210) * About Medications page: In the event the API call fails, we need to provide an error * e2e error message for list page api added test to validate error message for list page api call failure * fix the bug on breadcrumb * e2e refill page api call added test to verify error message for refill page api call failure * resolve the feedback * resolve the feedback * display the error message when api call fails * unit test fix * unit test fix * e2e updates test updates to include network and element locators * unit test error * eslint fix * eslint error * eslint fix --------- Co-authored-by: raji.venkatesh <[email protected]> * Removed account number from copay summary page as it's unique to each va location (#29678) * added email transform (#29670) * added primary contact info to submit transformer (#29679) * update-rx-icons (#29664) * updated icons * updated icons * removed unnecessary text * adjusted keynames and added some logging (#29646) * Add textUI textareaUI + mock form cleanup (#29658) * add textUI and textareaUI * cleanup mock form * VACMS-16964 VAMC Locations web components (#29634) * [mhv-57073] added spacing to about page. (#29647) * [mhv-57073] added spacing according to ucd specifications. * [mhv-57073] added left and right spacing to all pages. * [mhv-57073] fixed issue with top margin on h2 found by ucd after validating. * [mhv-57073] used small screen breakpoint instead of medium screen for h1. * Re-enable VAOS skipped tests (#29595) * Re-enable all skipped tests * Fix UpcomingAppointmentList tests * Remove redundant UrlAndPageTitleChange tests * Remove redundant TextareaWidget test * Re-enable ReasonForAppointmentPage test * Remove duplicated test with identical ids * Fix TypeOfVisitPage tests * Fix ClosestCityStatePage tests * Remove CommunityCarePreferencesPage tests * Fix flaky test * Fix CommunityCareProviderSelectionPage tests * Fix flaky TypeOfVisitPage tests * Update ClinicChoicePage tests * Skip flaky test * Add note for VAFacilityPage test * Fix DateTimeSelectPage tests * Re-enable skipped tests * Revert test change for CI * Fix last DateTimeSelectPage test * Address feedback * Update test issue link * Remove AppointmentCard * Consolidate and rename AppointmentPage unit tests * Update reducer logic * added back link to details page for desktop view * updated tests, added link for desktop details page * fixed scss * removed specific styles for mobile link * breadcrumb e2e fixes * adding their relationship to vet page (#29621) * MHV-57564: About Medications content and layout updates (#29611) * MHV-57564: About Medications content and layout updates * Layout update (lost in merge) * MHV-57108: "Show medications in this order" should span the width of the field and button below * Add UploadPage and basic uploading functionality (#29657) * Add UploadPage and basic uploading functionality * add scss file * Use different uploader and add tests * Remove reducers * remove a test * Use history.goBack instead of redirect * fix downtime banners (#28727) * MBMS-43498 Pre-need-integration non veteran military history updates (#29630) * MBMS-43498 Pre-need-integration non veteran military history updates * MBMS-43498 Initial version of complete content changes * MBMS-43498 POR/UI/UX Review changes * MBMS-43498 Fixed unit tests * 82039 improve unit test coverage for form 10-7959c (#29613) * simplified schema access in form config * added some title/depends testing * improved coverage of depends functions * updated documentation on missingfile comp * removed unused constants, added tests for transformers + missingfileoverview * render test for confirmation page + removed unnecessary conditonals * helper unit tests * more coverage * added readme and updated test to check certifier branch * more coverage * final coverage * fix array builder alert issues (#29715) * fix array builder alert issues * [CST] - Created diagram and new overview header (#29707) * created diagram and new overview header * add tests and add feature flag * add tests * updated SIP messaging and fixed SSN bug with prefill (#29720) * MHV-57094 All text should be aligned and not start under the checkboxes (#29654) * MHV-57094 resolve the feedback * resolve the feedback * - remove duplicate API endpoint calls (#29719) (for future appointments and unread messages) - cleanup * Ask VA 878 - Design Changes for Relationships - "More about your relationship to the Veteran" (#29638) * updated Veteran date of death page UI and test * update UI per figma, add test file, rename according to figma description * removed styles --------- Co-authored-by: Aaron Read <[email protected]> Co-authored-by: James Zaccardo <[email protected]> Co-authored-by: wafimohamed <[email protected]> Co-authored-by: Brandyn Sullins <[email protected]> Co-authored-by: gerard-sullivan <[email protected]> Co-authored-by: raji.venkatesh <[email protected]> Co-authored-by: Joseph Lee <[email protected]> Co-authored-by: Michael Clement <[email protected]> Co-authored-by: Robert Hasselle <[email protected]> Co-authored-by: Randi Mays <[email protected]> Co-authored-by: robertbylight <[email protected]> Co-authored-by: John Luo <[email protected]> Co-authored-by: Edwin Otero <[email protected]> Co-authored-by: Vitalii Menshutin <[email protected]> Co-authored-by: Eric Tillberg <[email protected]> Co-authored-by: Caitlin <[email protected]> Co-authored-by: ConnorJeff <[email protected]> Co-authored-by: Peri-Ann McLaren <[email protected]> Co-authored-by: allisonlu <[email protected]> Co-authored-by: Hemesh Patel <[email protected]>
department-of-veterans-affairs · May 13, 2024 · a44db58 · a44db58
1 parent 6d870fd
commit a44db58
Show file tree

Hide file tree

Showing 21 changed files with 320 additions and 288 deletions.
diff --git a/src/applications/mhv/medications/actions/breadcrumbs.js b/src/applications/mhv/medications/actions/breadcrumbs.js
diff --git a/src/applications/mhv/medications/components/MedicationsList/MedicationsListCard.jsx b/src/applications/mhv/medications/components/MedicationsList/MedicationsListCard.jsx
@@ -9,15 +9,11 @@ import {
   dispStatusForRefillsLeft,
   DD_ACTIONS_PAGE_TYPE,
 } from '../../util/constants';
-import { setBreadcrumbs } from '../../actions/breadcrumbs';
 import { setPrescriptionDetails } from '../../actions/prescriptions';
 import { selectRefillContentFlag } from '../../util/selectors';
 
 const MedicationsListCard = ({ rx }) => {
   const dispatch = useDispatch();
-  const pagination = useSelector(
-    state => state.rx.prescriptions?.prescriptionsPagination,
-  );
   const showRefillContent = useSelector(selectRefillContentFlag);
   let showRefillRemaining = false;
 
@@ -31,12 +27,6 @@ const MedicationsListCard = ({ rx }) => {
     return <p>{rx.refillRemaining} refills left</p>;
   };
   const handleLinkClick = () => {
-    dispatch(
-      setBreadcrumbs({
-        url: `/?page=${pagination?.currentPage || 1}`,
-        label: 'Medications',
-      }),
-    );
     dispatch(setPrescriptionDetails(rx));
   };
   return (

diff --git a/src/applications/mhv/medications/components/RefillPrescriptions/RenewablePrescriptions.jsx b/src/applications/mhv/medications/components/RefillPrescriptions/RenewablePrescriptions.jsx
@@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { waitForRenderThenFocus } from '@department-of-veterans-affairs/platform-utilities/ui';
-import { setBreadcrumbs } from '../../actions/breadcrumbs';
 import { setPrescriptionDetails } from '../../actions/prescriptions';
 import { DD_ACTIONS_PAGE_TYPE, medicationsUrls } from '../../util/constants';
 import { dateFormat, fromToNumbs } from '../../util/helpers';
@@ -50,12 +49,6 @@ const RenewablePrescriptions = ({ renewablePrescriptionsList = [] }) => {
 
   // Functions
   const onRxLinkClick = rx => {
-    dispatch(
-      setBreadcrumbs({
-        url: medicationsUrls.subdirectories.REFILL,
-        label: 'Refill prescriptions',
-      }),
-    );
     dispatch(setPrescriptionDetails(rx));
   };
 

diff --git a/src/applications/mhv/medications/containers/Prescriptions.jsx b/src/applications/mhv/medications/containers/Prescriptions.jsx
@@ -20,7 +20,6 @@ import {
   getAllergiesList,
   clearAllergiesError,
 } from '../actions/prescriptions';
-import { setBreadcrumbs } from '../actions/breadcrumbs';
 import MedicationsList from '../components/MedicationsList/MedicationsList';
 import MedicationsListSort from '../components/MedicationsList/MedicationsListSort';
 import {
@@ -476,22 +475,11 @@ const Prescriptions = () => {
     dispatch(clearAllergiesError());
   };
 
-  const handletoRefillLink = () => {
-    dispatch(
-      setBreadcrumbs({
-        url: medicationsUrls.subdirectories.BASE,
-        label: 'Medications',
-      }),
-    );
-  };
-
   const content = () => {
     if (!isLoading) {
       return (
         <div className="landing-page no-print">
-          <h1 className="vads-u-margin-top--neg3" data-testid="list-page-title">
-            Medications
-          </h1>
+          <h1 data-testid="list-page-title">Medications</h1>
           <div
             className="vads-u-margin-top--1 vads-u-margin-bottom--neg3 vads-u-font-family--serif"
             data-testid="Title-Notes"
@@ -531,7 +519,6 @@ const Prescriptions = () => {
                         className="vads-c-action-link--green vads-u-margin--0"
                         to={medicationsUrls.subdirectories.REFILL}
                         data-testid="prescriptions-nav-link-to-refill"
-                        onClick={handletoRefillLink}
                       >
                         Refill prescriptions
                       </Link>

diff --git a/src/applications/mhv/medications/containers/RxBreadcrumbs.jsx b/src/applications/mhv/medications/containers/RxBreadcrumbs.jsx
@@ -1,56 +1,55 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-// import { replaceWithStagingDomain } from '~/platform/utilities/environment/stagingDomains';
-import { Link, useLocation } from 'react-router-dom';
-import { removeBreadcrumbs, setBreadcrumbs } from '../actions/breadcrumbs';
+import { useSelector } from 'react-redux';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
+import { useLocation } from 'react-router-dom';
+import { createBreadcrumbs } from '../util/helpers';
 import { medicationsUrls } from '../util/constants';
 
 const RxBreadcrumbs = () => {
   const location = useLocation();
-  const dispatch = useDispatch();
-  const crumbs = useSelector(state => state.rx.breadcrumbs?.list);
-  const oneLevelDeepCrumb = crumbs?.length - 1;
-
+  const prescription = useSelector(
+    state => state.rx.prescriptions?.prescriptionDetails,
+  );
+  const pagination = useSelector(
+    state => state.rx.prescriptions?.prescriptionsPagination,
+  );
+  const [breadcrumbs, setBreadcrumbs] = React.useState([]);
   useEffect(
     () => {
-      if (!crumbs?.length && !location.pathname.includes('/about')) {
-        dispatch(
-          setBreadcrumbs({
-            url: medicationsUrls.subdirectories.ABOUT,
-            label: 'About medications',
-          }),
-        );
-      }
+      setBreadcrumbs(
+        createBreadcrumbs(location, prescription, pagination?.currentPage),
+      );
     },
-    [dispatch, crumbs, location.pathname],
+    [location, prescription, pagination?.currentPage],
   );
 
-  const backLink = () => {
-    dispatch(removeBreadcrumbs());
-  };
   return (
     <>
-      {crumbs.length > 0 &&
-        crumbs[0]?.url && (
-          <div className="no-print rx-breadcrumbs">
-            <div
-              className="vads-l-row vads-u-padding-y--3"
+      {breadcrumbs.length > 0 && (
+        <>
+          {!location.pathname.includes(
+            medicationsUrls.subdirectories.DETAILS,
+          ) ? (
+            <VaBreadcrumbs
+              uswds
+              wrapping
               label="Breadcrumb"
               data-testid="rx-breadcrumb"
-            >
-              <span className="breadcrumb-angle vads-u-padding-right--1">
-                {'\u2039'}{' '}
-              </span>
-              <Link
-                to={crumbs[oneLevelDeepCrumb]?.url}
-                onClick={backLink}
-                data-dd-action-name="Breadcrumb Link"
-              >
-                Back to {crumbs[oneLevelDeepCrumb]?.label}
-              </Link>
+              home-veterans-affairs="false"
+              breadcrumbList={breadcrumbs}
+              className="no-print va-breadcrumbs-li vads-u-margin-bottom--neg1p5 vads-u-display--block"
+            />
+          ) : (
+            <div className="include-back-arrow vads-u-margin-bottom--neg1p5 vads-u-padding-y--3">
+              <va-link
+                href={breadcrumbs[breadcrumbs.length - 2].href}
+                text={`Back to ${breadcrumbs[breadcrumbs.length - 2].label}`}
+                data-testid="rx-breadcrumb-link"
+              />
             </div>
-          </div>
-        )}
+          )}
+        </>
+      )}
     </>
   );
 };

diff --git a/src/applications/mhv/medications/reducers/breadcrumbs.js b/src/applications/mhv/medications/reducers/breadcrumbs.js
diff --git a/src/applications/mhv/medications/reducers/index.js b/src/applications/mhv/medications/reducers/index.js
@@ -1,13 +1,11 @@
 import { combineReducers } from 'redux';
 
 import { prescriptionsReducer } from './prescriptions';
-import { breadcrumbsReducer } from './breadcrumbs';
 import { allergiesReducer } from './allergies';
 
 const rootReducer = {
   rx: combineReducers({
     prescriptions: prescriptionsReducer,
-    breadcrumbs: breadcrumbsReducer,
     // TODO: consider re-using this from medical-records
     allergies: allergiesReducer,
   }),

diff --git a/src/applications/mhv/medications/sass/medications.scss b/src/applications/mhv/medications/sass/medications.scss
@@ -39,17 +39,6 @@
   margin-top: 70px;
 }
 
-.rx-breadcrumbs {
-  .breadcrumb-angle {
-    color: var(--vads-color-link);
-  }
-  a {
-    &:visited {
-      color: var(--vads-color-link);
-    }
-  }
-}
-
 .renew-pagination-container {
   width: 100%;
   display: flex;
@@ -325,4 +314,28 @@ va-checkbox.select-all-checkbox::part(label) {
 
 .hide-visited-link:visited {
   color: var(--vads-color-link) !important;
-}
+}
+
+.va-breadcrumbs-li {
+  padding: 5px 0 !important;
+}
+
+.include-back-arrow {
+  &::before {
+    content: "";
+    display: inline-block;
+    width: 2ex;
+    height: 2ex;
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E%3Cpath d%3D%22M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(transparent, transparent);
+    -webkit-mask-size: contain;
+    mask-size: 2ex 2ex;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    mask-position: center center;
+    bottom: -0.2em;
+    position: relative;
+    font-size: 16.96px;
+    color: rgb(27, 27, 27);
+    background: var(--vads-color-gray-medium);
+  }
+}
diff --git a/src/applications/mhv/medications/tests/actions/Breadcrumbs.unit.spec.jsx b/src/applications/mhv/medications/tests/actions/Breadcrumbs.unit.spec.jsx