src/applications/appeals/995/components/PrimaryPhoneReview.jsx
import React from 'react';
import PropTypes from 'prop-types';
import {
getFormattedPhone,
getPhoneString,
hasHomeAndMobilePhone,
} from '../utils/contactInfo';
import { PRIMARY_PHONE, errorMessages } from '../constants';
import { content } from '../content/primaryPhone';
import { data995 } from '../../shared/props';
const PrimaryPhoneReview = ({ data, editPage }) => {
const primary = data[PRIMARY_PHONE] || '';
const phone = data.veteran[`${primary}Phone`] || '';
const label = content[`${primary}Label`] || '';
const error =
getPhoneString(phone).trim() === '' || label === '' ? (
<strong className="usa-input-error-message">
{errorMessages.missingPrimaryPhone}
</strong>
) : null;
const labelWrapClasses = error
? 'vads-u-border-left--4px vads-u-border-color--secondary-dark vads-u-padding-left--1p5'
: '';
return hasHomeAndMobilePhone(data) ? (
<div className="form-review-panel-page">
<div className="form-review-panel-page-header-row">
<h4 className="form-review-panel-page-header vads-u-font-size--h5 vads-u-margin--0">
{content.reviewTitle}
</h4>
<va-button
secondary
class="edit-page float-right"
onClick={editPage}
label={content.editLabel}
text={content.edit}
uswds
/>
</div>
<dl className="review">
<div className="review-row">
<dt className={labelWrapClasses}>{error || label}</dt>
<dd className="dd-privacy-hidden" data-dd-action-name="primary phone">
<strong>{error ? '' : getFormattedPhone(phone)}</strong>
</dd>
</div>
</dl>
</div>
) : null;
};
PrimaryPhoneReview.propTypes = {
data: data995,
editPage: PropTypes.func,
};
export default PrimaryPhoneReview;