src/applications/vaos/appointment-list/pages/UpcomingAppointmentsDetailsPage/index.jsx
import React, { useEffect } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import moment from 'moment';
import ErrorMessage from '../../../components/ErrorMessage';
import FullWidthLayout from '../../../components/FullWidthLayout';
import CCLayout from '../../../components/layouts/CCLayout';
import VideoLayout from '../../../components/layouts/VideoLayout';
import { selectFeatureBreadcrumbUrlUpdate } from '../../../redux/selectors';
import {
isAtlasVideoAppointment,
isClinicVideoAppointment,
isVAPhoneAppointment,
} from '../../../services/appointment';
import { FETCH_STATUS } from '../../../utils/constants';
import { scrollAndFocus } from '../../../utils/scrollAndFocus';
import PageLayout from '../../components/PageLayout';
import {
closeCancelAppointment,
fetchConfirmedAppointmentDetails,
} from '../../redux/actions';
import {
getConfirmedAppointmentDetailsInfo,
selectIsCanceled,
selectIsInPerson,
selectIsPast,
} from '../../redux/selectors';
import DetailsVA from './DetailsVA';
export default function UpcomingAppointmentsDetailsPage() {
const dispatch = useDispatch();
const { id } = useParams();
const {
appointment,
appointmentDetailsStatus,
facilityData,
useV2,
} = useSelector(
state => getConfirmedAppointmentDetailsInfo(state, id),
shallowEqual,
);
const featureBreadcrumbUrlUpdate = useSelector(state =>
selectFeatureBreadcrumbUrlUpdate(state),
);
const isInPerson = selectIsInPerson(appointment);
const isPast = selectIsPast(appointment);
const isCanceled = selectIsCanceled(appointment);
const appointmentDate = moment.parseZone(appointment?.start);
const isVideo = appointment?.vaos?.isVideo;
const isCommunityCare = appointment?.vaos?.isCommunityCare;
const isVA = !isVideo && !isCommunityCare;
const appointmentTypePrefix = isCommunityCare ? 'cc' : 'va';
useEffect(
() => {
dispatch(fetchConfirmedAppointmentDetails(id, appointmentTypePrefix));
scrollAndFocus();
return () => {
dispatch(closeCancelAppointment());
};
},
[id, dispatch, appointmentTypePrefix],
);
useEffect(
() => {
let pageTitle = 'VA appointment on';
let prefix = 'Upcoming';
if (isPast) prefix = 'Past';
else if (selectIsCanceled(appointment)) prefix = 'Canceled';
if (isCommunityCare)
pageTitle = `${prefix} Community Care Appointment On`;
if (isInPerson) {
if (appointment?.vaos?.isCompAndPenAppointment)
pageTitle = `${prefix} Claim Exam Appointment On`;
else pageTitle = `${prefix} In-person Appointment On`;
}
if (isVideo) {
pageTitle = `${prefix} Video Appointment On`;
if (isClinicVideoAppointment(appointment)) {
pageTitle = `${prefix} Video Appointment At A VA Location On`;
}
if (isAtlasVideoAppointment(appointment)) {
pageTitle = `${prefix} Video Appointment At An ATLAS Location On`;
}
} else if (isVAPhoneAppointment(appointment)) {
pageTitle = `${prefix} Phone Appointment On`;
}
const pageTitleSuffix = featureBreadcrumbUrlUpdate
? ' | Veterans Affairs'
: '';
if (appointment && appointmentDate) {
document.title = `${pageTitle} ${appointmentDate.format(
'dddd, MMMM D, YYYY',
)}${pageTitleSuffix}`;
scrollAndFocus();
}
},
[
appointment,
appointmentDate,
isCommunityCare,
isCanceled,
isInPerson,
isPast,
isVideo,
featureBreadcrumbUrlUpdate,
],
);
useEffect(
() => {
if (
appointmentDetailsStatus === FETCH_STATUS.failed ||
(appointmentDetailsStatus === FETCH_STATUS.succeeded && !appointment)
) {
scrollAndFocus();
}
},
[appointmentDetailsStatus, appointment],
);
if (
appointmentDetailsStatus === FETCH_STATUS.failed ||
(appointmentDetailsStatus === FETCH_STATUS.succeeded && !appointment)
) {
return (
<PageLayout showBreadcrumbs showNeedHelp>
<ErrorMessage level={1} />
</PageLayout>
);
}
if (!appointment || appointmentDetailsStatus === FETCH_STATUS.loading) {
return (
<FullWidthLayout>
<va-loading-indicator set-focus message="Loading your appointment..." />
</FullWidthLayout>
);
}
return (
<PageLayout isDetailPage showNeedHelp>
{isVA && (
<DetailsVA
appointment={appointment}
facilityData={facilityData}
useV2={useV2}
/>
)}
{isCommunityCare && <CCLayout data={appointment} />}
{isVideo && <VideoLayout data={appointment} />}
</PageLayout>
);
}