Skip to content

Commit

Permalink
Merge branch 'main' into dependents-81671-QA-round-1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Midge-dev
Midge-dev authored Jan 16, 2025
2 parents 478affb + dc613b2 commit 2153f69
Show file tree
Hide file tree
Showing 8 changed files with 660 additions and 145 deletions.
320 changes: 240 additions & 80 deletions ...tions/personalization/profile/components/proof-of-veteran-status/ProofOfVeteranStatus.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import { generatePdf } from '~/platform/pdf';
import { focusElement } from '~/platform/utilities/ui';
import { captureError } from '~/platform/user/profile/vap-svc/util/analytics';
import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
import { useFeatureToggle } from '~/platform/utilities/feature-toggles';
import { apiRequest } from '~/platform/utilities/api';
import { formatFullName } from '../../../common/helpers';
import { getServiceBranchDisplayName } from '../../helpers';

Expand All @@ -23,6 +25,8 @@ const ProofOfVeteranStatus = ({
mockUserAgent,
}) => {
const [errors, setErrors] = useState([]);
const [data, setData] = useState(null);
const [shouldFocusError, setShouldFocusError] = useState(false);
const { first, middle, last, suffix } = userFullName;

const userAgent =
Expand Down Expand Up @@ -69,13 +73,45 @@ const ProofOfVeteranStatus = ({
},
};

const { TOGGLE_NAMES, useToggleValue } = useFeatureToggle();
const useLighthouseApi = useToggleValue(
TOGGLE_NAMES.veteranStatusCardUseLighthouseFrontend,
);

useEffect(() => {
let isMounted = true;

const fetchVerificationStatus = async () => {
try {
const path = '/profile/vet_verification_status';
const response = await apiRequest(path);
if (isMounted) {
setData(response.data);
}
} catch (error) {
if (isMounted) {
setErrors([
"We're sorry. There's a problem with our system. We can't show your Veteran status card right now. Try again later.",
]);
captureError(error, { eventName: 'vet-status-fetch-verification' });
}
}
};
fetchVerificationStatus();

return () => {
isMounted = false;
};
}, []);

useEffect(
() => {
if (errors?.length > 0) {
if (shouldFocusError && errors?.length > 0) {
focusElement('.vet-status-pdf-download-error');
setShouldFocusError(false);
}
},
[errors],
[shouldFocusError, errors],
);

const createPdf = async () => {
Expand All @@ -93,6 +129,7 @@ const ProofOfVeteranStatus = ({
"We're sorry. Something went wrong on our end. Please try to download your Veteran status card later.",
]);
captureError(error, { eventName: 'vet-status-pdf-download' });
setShouldFocusError(true);
}
};

Expand Down Expand Up @@ -123,93 +160,216 @@ const ProofOfVeteranStatus = ({
);
});

const contactInfoElements = data?.attributes?.message?.map(item => {
const contactNumber = `${CONTACTS.DS_LOGON.slice(
0,
3,
)}-${CONTACTS.DS_LOGON.slice(3, 6)}-${CONTACTS.DS_LOGON.slice(6)}`;
const startIndex = item.indexOf(contactNumber);

if (startIndex === -1) {
return item;
}

const before = item.slice(0, startIndex);
const telephone = item.slice(
startIndex,
startIndex + contactNumber.length + 11,
);
const after = item.slice(startIndex + telephone.length);

return (
<>
{before}
<va-telephone contact={contactNumber} /> (
<va-telephone contact={CONTACTS[711]} tty />){after}
</>
);
});

return (
<>
<div id="proof-of-veteran-status">
<h2 className="vads-u-margin-top--4 vads-u-margin-bottom--1p5">
Proof of Veteran status
</h2>
<p>
You can use your Veteran status card to get discounts offered to
Veterans at many restaurants, hotels, stores, and other businesses.
</p>
<p>
<strong>Note: </strong>
This card doesn’t entitle you to any VA benefits.
</p>

{vetStatusEligibility.confirmed ? (
<>
<div className="vads-u-font-size--md">
<va-link
download
filetype="PDF"
// exception to eslint: the url is a dynamically generated blob url
// eslint-disable-next-line no-script-url
href="javascript:void(0)"
text="Download and print your Veteran status card"
onClick={createPdf}
/>
</div>
{useLighthouseApi ? (
<div id="proof-of-veteran-status">
<h2 className="vads-u-margin-top--4 vads-u-margin-bottom--1p5">
Proof of Veteran status
</h2>
<p>
You can use your Veteran status card to get discounts offered to
Veterans at many restaurants, hotels, stores, and other businesses.
</p>
<p>
<strong>Note: </strong>
This card doesn’t entitle you to any VA benefits.
</p>

{errors?.length > 0 ? (
<div className="vet-status-pdf-download-error vads-u-padding-y--2">
<va-alert status="error" uswds>
{errors[0]}
</va-alert>
{data?.attributes?.veteranStatus === 'confirmed' ? (
<>
<div className="vads-u-font-size--md">
<va-link
download
filetype="PDF"
// exception to eslint: the url is a dynamically generated blob url
// eslint-disable-next-line no-script-url
href="javascript:void(0)"
text="Download and print your Veteran status card"
onClick={createPdf}
/>
</div>
) : null}

<div className="vads-l-grid-container--full vads-u-padding-y--2">
<div className="vads-l-row">
<div className="vads-l-col--12 xsmall-screen:vads-l-col--12 small-screen:vads-l-col--7 medium-screen:vads-l-col--5 ">
<img
width="100%"
src="/img/proof-of-veteran-status-card-sample.png"
alt="sample proof of veteran status card featuring name, date of birth, disability rating and period of service"
/>

{errors?.length > 0 ? (
<div className="vet-status-pdf-download-error vads-u-padding-y--2">
<va-alert status="error" uswds>
{errors[0]}
</va-alert>
</div>
) : null}

<div className="vads-l-grid-container--full vads-u-padding-y--2">
<div className="vads-l-row">
<div className="vads-l-col--12 xsmall-screen:vads-l-col--12 small-screen:vads-l-col--7 medium-screen:vads-l-col--5 ">
<img
width="100%"
src="/img/proof-of-veteran-status-card-sample.png"
alt="sample proof of veteran status card featuring name, date of birth, disability rating and period of service"
/>
</div>
</div>
</div>
</div>
<div className="vads-u-margin-y--4">
<MobileAppCallout
headingText="Get proof of Veteran status on your mobile device"
bodyText={
<>
You can use our mobile app to get proof of Veteran status.
To get started, download the{' '}
<strong> VA: Health and Benefits </strong> mobile app.
</>
}
/>
</div>
</>
) : null}

{!vetStatusEligibility.confirmed &&
vetStatusEligibility.message.length > 0 ? (
<>
<div>
<va-alert
close-btn-aria-label="Close notification"
status="warning"
visible
>
{componentizedMessage.map((message, i) => {
if (i === 0) {
return (
<p key={i} className="vads-u-margin-top--0">
{message}
</p>
);
<div className="vads-u-margin-y--4">
<MobileAppCallout
headingText="Get proof of Veteran status on your mobile device"
bodyText={
<>
You can use our mobile app to get proof of Veteran status.
To get started, download the{' '}
<strong> VA: Health and Benefits </strong> mobile app.
</>
}
return <p key={i}>{message}</p>;
})}
/>
</div>
</>
) : null}

{data?.attributes?.veteranStatus !== 'confirmed' &&
data?.attributes?.message.length > 0 ? (
<>
<div>
<va-alert
close-btn-aria-label="Close notification"
status="warning"
visible
>
{contactInfoElements.map((message, i) => {
if (i === 0) {
return (
<p key={i} className="vads-u-margin-top--0">
{message}
</p>
);
}
return <p key={i}>{message}</p>;
})}
</va-alert>
</div>
</>
) : null}

{errors?.length > 0 ? (
<div className="vet-status-fetch-verification-error vads-u-padding-y--2">
<va-alert status="error" uswds>
{errors[0]}
</va-alert>
</div>
</>
) : null}
</div>
) : null}
</div>
) : (
<div id="proof-of-veteran-status">
<h2 className="vads-u-margin-top--4 vads-u-margin-bottom--1p5">
Proof of Veteran status
</h2>
<p>
You can use your Veteran status card to get discounts offered to
Veterans at many restaurants, hotels, stores, and other businesses.
</p>
<p>
<strong>Note: </strong>
This card doesn’t entitle you to any VA benefits.
</p>

{vetStatusEligibility.confirmed ? (
<>
<div className="vads-u-font-size--md">
<va-link
download
filetype="PDF"
// exception to eslint: the url is a dynamically generated blob url
// eslint-disable-next-line no-script-url
href="javascript:void(0)"
text="Download and print your Veteran status card"
onClick={createPdf}
/>
</div>

{errors?.length > 0 ? (
<div className="vet-status-pdf-download-error vads-u-padding-y--2">
<va-alert status="error" uswds>
{errors[0]}
</va-alert>
</div>
) : null}

<div className="vads-l-grid-container--full vads-u-padding-y--2">
<div className="vads-l-row">
<div className="vads-l-col--12 xsmall-screen:vads-l-col--12 small-screen:vads-l-col--7 medium-screen:vads-l-col--5 ">
<img
width="100%"
src="/img/proof-of-veteran-status-card-sample.png"
alt="sample proof of veteran status card featuring name, date of birth, disability rating and period of service"
/>
</div>
</div>
</div>
<div className="vads-u-margin-y--4">
<MobileAppCallout
headingText="Get proof of Veteran status on your mobile device"
bodyText={
<>
You can use our mobile app to get proof of Veteran status.
To get started, download the{' '}
<strong> VA: Health and Benefits </strong> mobile app.
</>
}
/>
</div>
</>
) : null}

{!vetStatusEligibility.confirmed &&
vetStatusEligibility.message.length > 0 ? (
<>
<div>
<va-alert
close-btn-aria-label="Close notification"
status="warning"
visible
>
{componentizedMessage.map((message, i) => {
if (i === 0) {
return (
<p key={i} className="vads-u-margin-top--0">
{message}
</p>
);
}
return <p key={i}>{message}</p>;
})}
</va-alert>
</div>
</>
) : null}
</div>
)}
</>
);
};
Expand Down
Loading

0 comments on commit 2153f69

Please sign in to comment.