department-of-veterans-affairs/vets-website

View on GitHub
src/applications/facility-locator/components/search-results-items/common/LocationPhoneLink.jsx

Summary

Maintainability
A
2 hrs
Test Coverage
import React from 'react';
import PropTypes from 'prop-types';
import { LocationType } from '../../../constants';
import { parsePhoneNumber } from '../../../utils/phoneNumbers';
import CCProviderPhoneLink from './CCProviderPhoneLink';
 
Function `renderPhoneNumber` has 37 lines of code (exceeds 25 allowed). Consider refactoring.
Function `renderPhoneNumber` has a Cognitive Complexity of 7 (exceeds 5 allowed). Consider refactoring.
export const renderPhoneNumber = (
title,
subTitle = null,
phone,
from,
location,
) => {
if (!phone) {
return null;
}
 
const {
extension,
contact,
processed,
international,
countryCode,
} = parsePhoneNumber(phone);
// The Telephone component will throw an error if passed an invalid phone number.
// Since we can't use try/catch or componentDidCatch here, we'll just do this:
if (contact.length !== 10) {
return null;
}
 
const phoneNumberId = `${location.id}-${title.replaceAll(/\s+/g, '')}`;
 
return (
<p>
{from === 'FacilityDetail' && <va-icon icon="phone" size="3" />}
{title && <strong id={phoneNumberId}>{title}: </strong>}
{subTitle}
{processed ? (
<va-telephone
className={
subTitle ? 'vads-u-margin-left--0p5' : 'vads-u-margin-left--0p25'
}
contact={contact}
extension={extension}
message-aria-describedby={title}
country-code={countryCode}
international={international}
/>
) : (
// eslint-disable-next-line @department-of-veterans-affairs/prefer-telephone-component
<a href={`tel:${contact}`} aria-describedby={phoneNumberId}>
{contact}
</a>
)}
</p>
);
};
 
// NOTE: Do not use this component to display Covid19 appointment phone numbers.
// Use Covid19PhoneLink instead.
 
const LocationPhoneLink = ({
location,
from,
query,
showHealthConnectNumber = false,
}) => {
const isProvider = location.type === LocationType.CC_PROVIDER;
const { phone } = location.attributes;
 
if (isProvider) {
return (
<CCProviderPhoneLink
location={location}
query={query}
renderPhoneNumber={renderPhoneNumber}
/>
);
}
 
return (
<div className="facility-phone-group">
{renderPhoneNumber('Main number', null, phone.main, from, location)}
{showHealthConnectNumber &&
renderPhoneNumber(
'VA health connect',
null,
phone.healthConnect,
from,
location,
)}
{renderPhoneNumber(
'Mental health',
null,
phone.mentalHealthClinic,
from,
location,
)}
</div>
);
};
 
Similar blocks of code found in 71 locations. Consider refactoring.
LocationPhoneLink.propTypes = {
from: PropTypes.string,
location: PropTypes.object,
query: PropTypes.object,
showHealthConnectNumber: PropTypes.bool,
};
 
export default LocationPhoneLink;