src/applications/vaos/components/layouts/ClaimExamLayout.jsx
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,};