Make back and breadcrumbs work (#33579)

department-of-veterans-affairs · Dec 17, 2024 · 9f7b87f · 9f7b87f
1 parent 25861f2
commit 9f7b87f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 5 deletions.
diff --git a/src/applications/vaos/referral-appointments/ConfirmApprovedPage.jsx b/src/applications/vaos/referral-appointments/ConfirmApprovedPage.jsx
@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+
 import ReferralLayout from './components/ReferralLayout';
+import { routeToPreviousReferralPage } from './flow';
+import { setFormCurrentPage } from './redux/actions';
 
 const staticData = {
   typeOfCare: 'Primary Care',
@@ -22,13 +27,23 @@ const getData = (typeOfData = 'static') => {
 };
 
 export default function ConfirmApprovedPage() {
+  const history = useHistory();
+  const dispatch = useDispatch();
+
   const [confirmedData, setConfirmedData] = useState(0);
 
   // on react component mount, fetch data
   useEffect(() => {
     setConfirmedData(getData());
   }, []);
 
+  useEffect(
+    () => {
+      dispatch(setFormCurrentPage('confirmAppointment'));
+    },
+    [location, dispatch],
+  );
+
   return (
     <ReferralLayout hasEyebrow>
       <div>
@@ -103,7 +118,16 @@ export default function ConfirmApprovedPage() {
         <div>{confirmedData.details}</div>
         <hr className="vads-u-margin-y--2" />
         <div className="vads-u-margin-top--4">
-          <va-button label="Back" text="Back" secondary uswds />
+          <va-button
+            label="Back"
+            text="Back"
+            secondary
+            uswds
+            onClick={e => {
+              e.preventDefault();
+              routeToPreviousReferralPage(history, 'confirmAppointment');
+            }}
+          />
           <va-button
             class="vads-u-margin-left--2"
             label="Continue"

diff --git a/src/applications/vaos/referral-appointments/components/ReferralLayout.jsx b/src/applications/vaos/referral-appointments/components/ReferralLayout.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import DowntimeNotification, {
   externalServices,
 } from '@department-of-veterans-affairs/platform-monitoring/DowntimeNotification';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { VaLink } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import NeedHelp from '../../components/NeedHelp';
 import ErrorBoundary from '../../components/ErrorBoundary';
@@ -13,7 +13,6 @@ import { selectCurrentPage } from '../redux/selectors';
 import { routeToPreviousReferralPage } from '../flow';
 
 function BreadCrumbNav() {
-  const dispatch = useDispatch();
   const history = useHistory();
   const currentPage = useSelector(selectCurrentPage);
 
@@ -32,7 +31,7 @@ function BreadCrumbNav() {
           text={text}
           onClick={e => {
             e.preventDefault();
-            dispatch(routeToPreviousReferralPage(history, currentPage));
+            routeToPreviousReferralPage(history, currentPage);
           }}
         />
       </nav>

diff --git a/src/applications/vaos/referral-appointments/flow.js b/src/applications/vaos/referral-appointments/flow.js
@@ -71,7 +71,14 @@ export function routeToPreviousReferralPage(
   current,
   referralId = null,
 ) {
-  return routeToPageInFlow(history, current, 'previous', referralId);
+  let resolvedReferralId = referralId;
+  // Give the router some context to keep the user in the same referral when navigating back if not
+  // explicitly passed
+  if (!referralId && history.location?.search) {
+    const params = new URLSearchParams(history.location.search);
+    resolvedReferralId = params.get('id');
+  }
+  return routeToPageInFlow(history, current, 'previous', resolvedReferralId);
 }
 
 export function routeToNextReferralPage(history, current, referralId = null) {