Fix breadcrumb to match page title for VA appointment flow (#29403)

* Update breadcrumb for VA appointment flow * Rename selector function
department-of-veterans-affairs · Apr 29, 2024 · 66564aa · 66564aa
1 parent df5c0e1
commit 66564aa
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 122 deletions.
diff --git a/src/applications/vaos/components/Breadcrumbs.jsx b/src/applications/vaos/components/Breadcrumbs.jsx
@@ -4,16 +4,13 @@ import { useLocation } from 'react-router-dom';
 import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import { useSelector } from 'react-redux';
 import manifest from '../manifest.json';
-import { getFacilityPageV2Info } from '../new-appointment/redux/selectors';
 import { getUrlLabel } from '../new-appointment/newAppointmentFlow';
 import { getCovidUrlLabel } from '../covid-19-vaccine/flow';
 
 export default function VAOSBreadcrumbs({ children }) {
   const location = useLocation();
   // get boolean if single va location
-  const { singleValidVALocation } = useSelector(state =>
-    getFacilityPageV2Info(state),
-  );
+
   const [breadcrumb, setBreadcrumb] = useState([]);
 
   const label = useSelector(state => getUrlLabel(state, location));
@@ -70,12 +67,7 @@ export default function VAOSBreadcrumbs({ children }) {
         },
       ];
     }
-    if (singleValidVALocation && breadcrumb === 'Choose a VA location') {
-      return [
-        ...BREADCRUMB_BASE,
-        { href: window.location.href, label: 'Your appointment location' },
-      ];
-    }
+
     return [
       ...BREADCRUMB_BASE,
       {

diff --git a/src/applications/vaos/new-appointment/components/ClinicChoicePage/index.jsx b/src/applications/vaos/new-appointment/components/ClinicChoicePage/index.jsx
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 import SchemaForm from '@department-of-veterans-affairs/platform-forms-system/SchemaForm';
 import FormButtons from '../../../components/FormButtons';
 import RequestEligibilityMessage from './RequestEligibilityMessage';
@@ -21,10 +20,8 @@ import {
 } from '../../redux/selectors';
 import useClinicFormState from './useClinicFormState';
 import { MENTAL_HEALTH, PRIMARY_CARE } from '../../../utils/constants';
-import {
-  selectFeatureClinicFilter,
-  selectFeatureBreadcrumbUrlUpdate,
-} from '../../../redux/selectors';
+import { selectFeatureClinicFilter } from '../../../redux/selectors';
+import { getPageTitle } from '../../newAppointmentFlow';
 
 function formatTypeOfCare(careLabel) {
   if (careLabel.startsWith('MOVE') || careLabel.startsWith('CPAP')) {
@@ -39,11 +36,8 @@ function vowelCheck(givenString) {
 }
 
 const pageKey = 'clinicChoice';
-const pageTitle = 'Choose a VA clinic';
-export default function ClinicChoicePage({ changeCrumb }) {
-  const featureBreadcrumbUrlUpdate = useSelector(state =>
-    selectFeatureBreadcrumbUrlUpdate(state),
-  );
+export default function ClinicChoicePage() {
+  const pageTitle = useSelector(state => getPageTitle(state, pageKey));
 
   const featureClinicFilter = useSelector(state =>
     selectFeatureClinicFilter(state),
@@ -75,10 +69,6 @@ export default function ClinicChoicePage({ changeCrumb }) {
   useEffect(() => {
     scrollAndFocus();
     document.title = `${pageTitle} | Veterans Affairs`;
-    if (featureBreadcrumbUrlUpdate) {
-      changeCrumb(pageTitle);
-    }
-
     dispatch(startDirectScheduleFlow({ isRecordEvent: false }));
   }, []);
 
@@ -154,7 +144,3 @@ export default function ClinicChoicePage({ changeCrumb }) {
     </div>
   );
 }
-
-ClinicChoicePage.propTypes = {
-  changeCrumb: PropTypes.func,
-};
diff --git a/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx b/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx
@@ -22,10 +22,9 @@ import { FETCH_STATUS } from '../../../utils/constants';
 import { getRealFacilityId } from '../../../utils/appointment';
 import NewTabAnchor from '../../../components/NewTabAnchor';
 import useIsInitialLoad from '../../../hooks/useIsInitialLoad';
-import { selectFeatureBreadcrumbUrlUpdate } from '../../../redux/selectors';
+import { getPageTitle } from '../../newAppointmentFlow';
 
 const pageKey = 'selectDateTime';
-const pageTitle = 'Choose a date and time';
 
 function renderContent({ dispatch, isRequest, facilityId, history }) {
   // Display this content when the facility is configured to accept appointment
@@ -101,10 +100,8 @@ function goForward({ dispatch, data, history, setSubmitted }) {
   }
 }
 
-export default function DateTimeSelectPage({ changeCrumb }) {
-  const featureBreadcrumbUrlUpdate = useSelector(state =>
-    selectFeatureBreadcrumbUrlUpdate(state),
-  );
+export default function DateTimeSelectPage() {
+  const pageTitle = useSelector(state => getPageTitle(state, pageKey));
 
   const {
     appointmentSlotsStatus,
@@ -129,12 +126,6 @@ export default function DateTimeSelectPage({ changeCrumb }) {
   const isInitialLoad = useIsInitialLoad(loadingSlots);
   const eligibility = useSelector(selectEligibility);
 
-  useEffect(() => {
-    if (featureBreadcrumbUrlUpdate) {
-      changeCrumb(pageTitle);
-    }
-  }, []);
-
   useEffect(
     () => {
       dispatch(
@@ -269,7 +260,3 @@ ErrorMessage.propTypes = {
   facilityId: PropTypes.string.isRequired,
   history: PropTypes.object.isRequired,
 };
-
-DateTimeSelectPage.propTypes = {
-  changeCrumb: PropTypes.func,
-};
diff --git a/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx b/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx
@@ -1,20 +1,19 @@
 import React, { useEffect } from 'react';
 import moment from 'moment';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-import SchemaForm from 'platform/forms-system/src/js/components/SchemaForm';
+import SchemaForm from '@department-of-veterans-affairs/platform-forms-system/SchemaForm';
 import { useHistory } from 'react-router-dom';
 import FormButtons from '../../components/FormButtons';
 import { getPreferredDate } from '../redux/selectors';
 import { scrollAndFocus } from '../../utils/scrollAndFocus';
-import { selectFeatureBreadcrumbUrlUpdate } from '../../redux/selectors';
 
 import {
   openFormPage,
   routeToNextAppointmentPage,
   routeToPreviousAppointmentPage,
   updateFormData,
 } from '../redux/actions';
+import { getPageTitle } from '../newAppointmentFlow';
 
 const initialSchema = {
   type: 'object',
@@ -51,12 +50,9 @@ const uiSchema = {
 };
 
 const pageKey = 'preferredDate';
-const pageTitle = 'When do you want to schedule this appointment?';
 
-export default function PreferredDatePage({ changeCrumb }) {
-  const featureBreadcrumbUrlUpdate = useSelector(state =>
-    selectFeatureBreadcrumbUrlUpdate(state),
-  );
+export default function PreferredDatePage() {
+  const pageTitle = useSelector(state => getPageTitle(state, pageKey));
 
   const dispatch = useDispatch();
   const { schema, data, pageChangeInProgress } = useSelector(
@@ -68,9 +64,6 @@ export default function PreferredDatePage({ changeCrumb }) {
     document.title = `${pageTitle} | Veterans Affairs`;
     scrollAndFocus();
     dispatch(openFormPage(pageKey, uiSchema, initialSchema));
-    if (featureBreadcrumbUrlUpdate) {
-      changeCrumb(pageTitle);
-    }
   }, []);
 
   return (
@@ -102,7 +95,3 @@ export default function PreferredDatePage({ changeCrumb }) {
     </div>
   );
 }
-
-PreferredDatePage.propTypes = {
-  changeCrumb: PropTypes.func,
-};
diff --git a/src/applications/vaos/new-appointment/components/TypeOfVisitPage.jsx b/src/applications/vaos/new-appointment/components/TypeOfVisitPage.jsx
@@ -1,49 +1,45 @@
 import React, { useEffect } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
 import SchemaForm from '@department-of-veterans-affairs/platform-forms-system/SchemaForm';
 import { VaRadioField } from '@department-of-veterans-affairs/platform-forms-system/web-component-fields';
 import FormButtons from '../../components/FormButtons';
 import { getFormPageInfo, getNewAppointment } from '../redux/selectors';
 import { FLOW_TYPES, TYPE_OF_VISIT } from '../../utils/constants';
 import { scrollAndFocus } from '../../utils/scrollAndFocus';
-import { selectFeatureBreadcrumbUrlUpdate } from '../../redux/selectors';
 import {
   openFormPage,
   routeToNextAppointmentPage,
   routeToPreviousAppointmentPage,
   updateFormData,
 } from '../redux/actions';
-
-const uiSchema = {
-  visitType: {
-    'ui:widget': 'radio', // Required
-    'ui:webComponentField': VaRadioField,
-    'ui:title': 'How do you want to attend this appointment?',
-    'ui:errorMessages': {
-      required: 'Select an option',
-    },
-    'ui:options': {
-      labelHeaderLevel: '1',
-    },
-  },
-};
+import { getPageTitle } from '../newAppointmentFlow';
 
 const pageKey = 'visitType';
-const pageTitle = 'How do you want to attend this appointment?';
 
-export default function TypeOfVisitPage({ changeCrumb }) {
-  const featureBreadcrumbUrlUpdate = useSelector(state =>
-    selectFeatureBreadcrumbUrlUpdate(state),
-  );
+export default function TypeOfVisitPage() {
+  const pageTitle = useSelector(state => getPageTitle(state, pageKey));
 
   const { schema, data, pageChangeInProgress } = useSelector(
     state => getFormPageInfo(state, pageKey),
     shallowEqual,
   );
   const { flowType } = useSelector(getNewAppointment);
 
+  const uiSchema = {
+    visitType: {
+      'ui:widget': 'radio', // Required
+      'ui:webComponentField': VaRadioField,
+      'ui:title': pageTitle,
+      'ui:errorMessages': {
+        required: 'Select an option',
+      },
+      'ui:options': {
+        labelHeaderLevel: '1',
+      },
+    },
+  };
+
   const initialSchema = {
     type: 'object',
     required: ['visitType'],
@@ -67,9 +63,6 @@ export default function TypeOfVisitPage({ changeCrumb }) {
     dispatch(openFormPage(pageKey, uiSchema, initialSchema));
     document.title = `${pageTitle} | Veterans Affairs`;
     scrollAndFocus();
-    if (featureBreadcrumbUrlUpdate) {
-      changeCrumb(pageTitle);
-    }
   }, []);
 
   return (
@@ -100,7 +93,3 @@ export default function TypeOfVisitPage({ changeCrumb }) {
     </div>
   );
 }
-
-TypeOfVisitPage.propTypes = {
-  changeCrumb: PropTypes.func,
-};
diff --git a/src/applications/vaos/new-appointment/components/VAFacilityPage/VAFacilityPageV2.jsx b/src/applications/vaos/new-appointment/components/VAFacilityPage/VAFacilityPageV2.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import SchemaForm from 'platform/forms-system/src/js/components/SchemaForm';
 import { usePrevious } from 'platform/utilities/react-hooks';
@@ -25,7 +24,7 @@ import {
   updateFormData,
   hideEligibilityModal,
 } from '../../redux/actions';
-import { selectFeatureBreadcrumbUrlUpdate } from '../../../redux/selectors';
+import { getPageTitle } from '../../newAppointmentFlow';
 
 const initialSchema = {
   type: 'object',
@@ -46,10 +45,9 @@ const sortOptions = [
   { value: 'alphabetical', label: 'Alphabetically' },
 ];
 
-export default function VAFacilityPageV2({ changeCrumb }) {
-  const featureBreadcrumbUrlUpdate = useSelector(state =>
-    selectFeatureBreadcrumbUrlUpdate(state),
-  );
+export default function VAFacilityPageV2() {
+  const pageTitle = useSelector(state => getPageTitle(state, pageKey));
+
   const history = useHistory();
   const dispatch = useDispatch();
   const {
@@ -87,9 +85,6 @@ export default function VAFacilityPageV2({ changeCrumb }) {
   const loadingFacilities =
     childFacilitiesStatus === FETCH_STATUS.loading ||
     childFacilitiesStatus === FETCH_STATUS.notStarted;
-  const pageTitle = singleValidVALocation
-    ? 'Your appointment location'
-    : 'Choose a VA location';
 
   const isLoading =
     loadingFacilities || (singleValidVALocation && loadingEligibility);
@@ -104,9 +99,6 @@ export default function VAFacilityPageV2({ changeCrumb }) {
     () => {
       document.title = `${pageTitle} | Veterans Affairs`;
       scrollAndFocus();
-      if (featureBreadcrumbUrlUpdate) {
-        changeCrumb(pageTitle);
-      }
     },
     [isLoading],
   );
@@ -302,7 +294,3 @@ export default function VAFacilityPageV2({ changeCrumb }) {
     </div>
   );
 }
-
-VAFacilityPageV2.propTypes = {
-  changeCrumb: PropTypes.func,
-};
diff --git a/src/applications/vaos/new-appointment/newAppointmentFlow.js b/src/applications/vaos/new-appointment/newAppointmentFlow.js
@@ -9,6 +9,7 @@ import {
   getFormData,
   getNewAppointment,
   getTypeOfCare,
+  selectSingleSupportedVALocation,
   selectCommunityCareSupportedSites,
   selectEligibility,
 } from './redux/selectors';
@@ -328,6 +329,7 @@ const flow = {
 export default function getNewAppointmentFlow(state) {
   const featureBreadcrumbUrlUpdate = selectFeatureBreadcrumbUrlUpdate(state);
   const flowType = getFlowType(state);
+  const isSingleVaFacility = selectSingleSupportedVALocation(state);
 
   return {
     ...flow,
@@ -476,6 +478,10 @@ export default function getNewAppointmentFlow(state) {
     },
     vaFacilityV2: {
       ...flow.vaFacilityV2,
+      label: isSingleVaFacility
+        ? 'Your appointment location'
+        : 'Choose a VA location',
+
       url: featureBreadcrumbUrlUpdate
         ? 'location'
         : '/new-appointment/va-facility-2',

diff --git a/src/applications/vaos/new-appointment/redux/reducer.js b/src/applications/vaos/new-appointment/redux/reducer.js
@@ -266,7 +266,12 @@ export default function formReducer(state = initialState, action) {
     case FORM_UPDATE_FACILITY_TYPE: {
       return {
         ...state,
-        data: { ...state.data, facilityType: action.facilityType },
+        data: {
+          ...state.data,
+          facilityType: action.facilityType,
+          isSingleVaFacility:
+            action.facilityType !== FACILITY_TYPES.COMMUNITY_CARE,
+        },
       };
     }
     case FORM_PAGE_FACILITY_V2_OPEN: {
@@ -313,12 +318,14 @@ export default function formReducer(state = initialState, action) {
         isTypeOfCareSupported(facility, typeOfCareId, cernerSiteIds),
       );
 
-      if (typeOfCareFacilities.length === 1) {
-        newData = {
-          ...newData,
-          vaFacility: typeOfCareFacilities[0]?.id,
-        };
-      }
+      newData = {
+        ...newData,
+        vaFacility:
+          typeOfCareFacilities.length === 1
+            ? typeOfCareFacilities[0]?.id
+            : null,
+        isSingleVaFacility: typeOfCareFacilities.length === 1,
+      };
 
       newSchema = set(
         'properties.vaFacility',