department-of-veterans-affairs/vets-website

View on GitHub
src/applications/vaos/components/layouts/ClaimExamLayout.jsx

Summary

Maintainability
F
3 days
Test Coverage
import React from 'react';
import PropTypes from 'prop-types';
import { shallowEqual } from 'recompose';
import { useSelector } from 'react-redux';
import { getRealFacilityId } from '../../utils/appointment';
import {
AppointmentDate,
AppointmentTime,
} from '../../appointment-list/components/AppointmentDateTime';
import { selectConfirmedAppointmentData } from '../../appointment-list/redux/selectors';
import DetailPageLayout, {
When,
What,
Where,
ClinicOrFacilityPhone,
Prepare,
Who,
} from './DetailPageLayout';
import Section from '../Section';
import { APPOINTMENT_STATUS } from '../../utils/constants';
import FacilityDirectionsLink from '../FacilityDirectionsLink';
import Address from '../Address';
import AddToCalendarButton from '../AddToCalendarButton';
import NewTabAnchor from '../NewTabAnchor';
import FacilityPhone from '../FacilityPhone';
import {
NULL_STATE_FIELD,
recordAppointmentDetailsNullStates,
} from '../../utils/events';
 
Function `ClaimExamLayout` has a Cognitive Complexity of 12 (exceeds 5 allowed). Consider refactoring.
export default function ClaimExamLayout({ data: appointment }) {
Similar blocks of code found in 5 locations. Consider refactoring.
const {
clinicName,
clinicPhysicalLocation,
clinicPhone,
clinicPhoneExtension,
facility,
facilityPhone,
locationId,
isPastAppointment,
practitionerName,
startDate,
status,
typeOfCareName,
} = useSelector(
state => selectConfirmedAppointmentData(state, appointment),
shallowEqual,
);
 
if (!appointment) return null;
 
let heading = 'Claim exam';
const facilityId = locationId;
if (isPastAppointment) heading = 'Past claim exam';
else if (APPOINTMENT_STATUS.cancelled === status)
heading = 'Canceled claim exam';
 
recordAppointmentDetailsNullStates({
[NULL_STATE_FIELD.TYPE_OF_CARE]: !typeOfCareName,
});
 
return (
<DetailPageLayout heading={heading} data={appointment}>
Similar blocks of code found in 7 locations. Consider refactoring.
<When>
<AppointmentDate date={startDate} />
<br />
<AppointmentTime appointment={appointment} />
<br />
{APPOINTMENT_STATUS.booked === status &&
!isPastAppointment && (
<div className="vads-u-margin-top--2 vaos-hide-for-print">
<AddToCalendarButton
appointment={appointment}
facility={facility}
/>
</div>
)}
</When>
<What>{typeOfCareName}</What>
<Who>{practitionerName}</Who>
Similar blocks of code found in 2 locations. Consider refactoring.
<Where
heading={
APPOINTMENT_STATUS.booked === status && !isPastAppointment
? 'Where to attend'
: 'Where'
}
>
{/* When the services return a null value for the facility (no facility ID) for all appointment types */}
{!facility &&
!facilityId && (
<>
<span>Facility details not available</span>
<br />
<NewTabAnchor href="/find-locations">
Find facility information
</NewTabAnchor>
<br />
<br />
</>
)}
{/* When the services return a null value for the facility (but receive the facility ID) */}
{!facility &&
!!facilityId && (
<>
<span>Facility details not available</span>
<br />
<NewTabAnchor
href={`/find-locations/facility/vha_${getRealFacilityId(
facilityId,
)}`}
>
View facility information
</NewTabAnchor>
<br />
<br />
</>
)}
{!!facility && (
<>
<a href={facility.website}>{facility.name}</a>
<br />
<Address address={facility?.address} />
<div className="vads-u-margin-top--1 vads-u-color--link-default">
<FacilityDirectionsLink location={facility} icon />
</div>
<br />
<span>Clinic: {clinicName || 'Not available'}</span> <br />
<span>Location: {clinicPhysicalLocation || 'Not available'}</span>
<br />
</>
)}
<ClinicOrFacilityPhone
clinicPhone={clinicPhone}
clinicPhoneExtension={clinicPhoneExtension}
facilityPhone={facilityPhone}
/>
</Where>
{((APPOINTMENT_STATUS.booked === status && isPastAppointment) ||
APPOINTMENT_STATUS.cancelled === status) && (
<Section heading="Scheduling facility">
Similar blocks of code found in 3 locations. Consider refactoring.
{!facility && (
<>
<span>Facility details not available</span>
<br />
<NewTabAnchor href="/find-locations">
Find facility information
</NewTabAnchor>
<br />
<br />
</>
)}
{!!facility && (
<>
<a href={facility.website}>{facility.name}</a>
<br />
{facilityPhone && (
<FacilityPhone heading="Phone:" contact={facilityPhone} />
)}
{!facilityPhone && <>Not available</>}
</>
)}
</Section>
)}
 
{!isPastAppointment &&
(APPOINTMENT_STATUS.booked === status ||
APPOINTMENT_STATUS.cancelled === status) && (
<Prepare>
<ul className="vads-u-margin-top--0 vads-u-margin-bottom--0">
<li>You don't need to bring anything to your exam.</li>
<li>
If you have any new non-VA medical records (like records from a
recent surgery or illness), be sure to submit them before your
appointment.
</li>
</ul>
<a
target="_self"
href="https://www.va.gov/disability/va-claim-exam/"
>
Learn more about claim exam appointments
</a>
</Prepare>
)}
{APPOINTMENT_STATUS.booked === status &&
!isPastAppointment && (
<Section heading="Need to make changes?">
Contact this facility compensation and pension office if you need to
reschedule or cancel your appointment.
<br />
<br />
<ClinicOrFacilityPhone
clinicPhone={clinicPhone}
clinicPhoneExtension={clinicPhoneExtension}
facilityPhone={facilityPhone}
/>
</Section>
)}
</DetailPageLayout>
);
}
ClaimExamLayout.propTypes = {
data: PropTypes.object,
};