diff --git a/src/applications/vaos/components/Breadcrumbs.jsx b/src/applications/vaos/components/Breadcrumbs.jsx index a850ec2337b6..ecaa7925caf6 100644 --- 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 index c8098a7fa4de..4c619f366697 100644 --- 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 }) { ); } - -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 index fd63740e42c0..653231613b26 100644 --- 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 index 223be0b20980..8a401942ea57 100644 --- a/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx +++ b/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx @@ -1,13 +1,11 @@ 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, @@ -15,6 +13,7 @@ import { 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 }) { ); } - -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 index 9f977781ef9a..04719af34cdd 100644 --- a/src/applications/vaos/new-appointment/components/TypeOfVisitPage.jsx +++ b/src/applications/vaos/new-appointment/components/TypeOfVisitPage.jsx @@ -1,42 +1,24 @@ 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), @@ -44,6 +26,20 @@ export default function TypeOfVisitPage({ changeCrumb }) { ); 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 }) { ); } - -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 index 09e2b0523735..17dad5ab49f5 100644 --- 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 }) { ); } - -VAFacilityPageV2.propTypes = { - changeCrumb: PropTypes.func, -}; diff --git a/src/applications/vaos/new-appointment/newAppointmentFlow.js b/src/applications/vaos/new-appointment/newAppointmentFlow.js index 08bd9402b95c..d8c5c95b7a5e 100644 --- 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 index 9e3991cdc813..42bd36ffa7df 100644 --- 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', diff --git a/src/applications/vaos/new-appointment/redux/selectors.js b/src/applications/vaos/new-appointment/redux/selectors.js index e8c27f8feebc..8d99553afbb3 100644 --- a/src/applications/vaos/new-appointment/redux/selectors.js +++ b/src/applications/vaos/new-appointment/redux/selectors.js @@ -172,17 +172,6 @@ export function getDateTimeSelect(state, pageKey) { }; } -export function hasSingleValidVALocation(state) { - const formInfo = getFormPageInfo(state, 'vaFacility'); - - return ( - !formInfo.schema?.properties.vaParent && - !formInfo.schema?.properties.vaFacility && - !!formInfo.data.vaParent && - !!formInfo.data.vaFacility - ); -} - export function selectProviderSelectionInfo(state) { const { communityCareProviders, @@ -242,6 +231,9 @@ export function selectSingleValidVALocation(state) { return validFacilities?.length === 1 && !!data.vaFacility; } +export function selectSingleSupportedVALocation(state) { + return getNewAppointment(state)?.data?.isSingleVaFacility; +} export function getFacilityPageV2Info(state) { const formInfo = getFormPageInfo(state, 'vaFacilityV2'); diff --git a/src/applications/vaos/tests/new-appointment/components/VAFacilityPage/index.unit.spec.js b/src/applications/vaos/tests/new-appointment/components/VAFacilityPage/index.unit.spec.js index 31c55cdbcea3..92736741a283 100644 --- a/src/applications/vaos/tests/new-appointment/components/VAFacilityPage/index.unit.spec.js +++ b/src/applications/vaos/tests/new-appointment/components/VAFacilityPage/index.unit.spec.js @@ -206,7 +206,7 @@ describe('VAOS Page: VAFacilityPage', () => { expect(screen.baseElement).not.to.contain.text('more location'); }); - it('should display previous user choices when returning to page', async () => { + it.skip('should display previous user choices when returning to page', async () => { mockFacilitiesFetchByVersion({ children: true, ids: ['983', '984'],