Skip to content

Commit

Permalink
Travel Pay/add "status explainer" page and routes (#33482)
Browse files Browse the repository at this point in the history
* move PR changes to fresh branch

* remove commented code, help content now default export, update imports
  • Loading branch information
liztownd authored Dec 11, 2024
1 parent 2ab53a6 commit 67439c3
Show file tree
Hide file tree
Showing 12 changed files with 396 additions and 67 deletions.
15 changes: 12 additions & 3 deletions src/applications/travel-pay/components/Breadcrumbs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@ import { useLocation, useHistory, Link } from 'react-router-dom';
export default function BreadCrumbs() {
const { pathname } = useLocation();
const history = useHistory();
const uuidPathRegex = /^\/[\da-f]{8}-[\da-f]{4}-[\da-f]{4}-[89abcd][\da-f]{3}-[\da-f]{12}$/i;
const uuidPathRegex = /^\/[0-9A-F]{8}-[0-9A-F]{4}-[0-9A-F]{4}-[89ABCD][0-9A-F]{3}-[0-9A-F]{12}$/i;
const isDetailsPage = pathname.match(uuidPathRegex);
const isStatusExplainer = pathname.includes('/help');

const breadcrumbList = [
{
Expand All @@ -20,19 +21,27 @@ export default function BreadCrumbs() {
label: 'My HealtheVet',
},
{
href: '/my-health/travel-claim-status',
href: '/',
label: 'Check your travel reimbursement claim status',
isRouterLink: true,
},
];

if (isStatusExplainer) {
breadcrumbList.push({
href: '/help',
label: 'Help: Claim Status Meanings',
isRouterLink: true,
});
}

const handleRouteChange = ({ detail }) => {
const { href } = detail;
history.push(href);
};

return isDetailsPage ? (
<div className="claim-details-breadcrumb-wrapper">
<div className="travel-pay-breadcrumb-wrapper">
{isDetailsPage && <va-icon class="back-arrow" icon="arrow_back" />}
<Link className="go-back-link" to="/">
Back to your travel reimbursement claims
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,18 @@ export default function ClaimDetailsContent(props) {
return (
<>
<h1>Your travel reimbursement claim for {appointmentDate}</h1>
<span className="claim-details-claim-number">
<span
className="vads-u-font-size--h2 vads-u-font-weight--bold"
data-testid="claim-details-claim-number"
>
Claim number: {claimNumber}
</span>
<h2 className="claim-details-h3">Where</h2>
<h2 className="vads-u-font-size--h3">Where</h2>
<p className="vads-u-margin-bottom--0">
{appointmentDate} at {appointmentTime} appointment
</p>
<p className="vads-u-margin-y--0">{facilityName}</p>
<h2 className="claim-details-h3">Claim status: {claimStatus}</h2>
<h2 className="vads-u-font-size--h3">Claim status: {claimStatus}</h2>
<p className="vads-u-margin-bottom--0">
Submitted on {createDate} at {createTime}
</p>
Expand Down
46 changes: 27 additions & 19 deletions src/applications/travel-pay/components/HelpText.jsx
Original file line number Diff line number Diff line change
@@ -1,28 +1,36 @@
import React from 'react';
import { Link } from 'react-router-dom';

export function HelpTextContent() {
export default function HelpTextContent() {
const BTSSS_PORTAL_URL = 'https://dvagov-btsss.dynamics365portals.us/';

return (
<p>
To manage your travel claims, file a new claim, or learn what your claim
status means, go to our{' '}
<a className="btsss-portal-link" href={BTSSS_PORTAL_URL}>
Beneficiary Travel Self Service System (BTSSS) portal (opens in new tab)
</a>
.<br />
Or call <va-telephone contact="8555747292" /> from 7 a.m. to 7 p.m. Monday
through Friday. Have your claim number ready to share when you call.
</p>
);
}

export default function HelpText() {
return (
<div>
<p>You can use this tool to check the status of your VA travel claims.</p>
<h2>How to manage your claims or get more information</h2>
<HelpTextContent />
<p>
To manage your travel claims or file a new claim, go to our{' '}
<va-link
external
href={BTSSS_PORTAL_URL}
text="Beneficiary Travel Self Service System (BTSSS) portal"
/>
.
</p>
<p className="vads-u-margin-top--2">
Or call <va-telephone contact="8555747292" /> from 7 a.m. to 7 p.m.
Monday through Friday. Have your claim number ready to share when you
call.
</p>
<p className="vads-u-margin-top--2">
<Link
data-testid="status-explainer-link"
to={{
pathname: '/help',
}}
className="vads-u-display--flex vads-u-align-items--center"
>
What does my claim status mean?
</Link>
</p>
</div>
);
}
2 changes: 1 addition & 1 deletion src/applications/travel-pay/components/TravelClaimCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export default function TravelClaimCard(props) {
return (
<va-card key={id} class="travel-claim-card vads-u-margin-bottom--2">
<h3
className="vads-u-margin-top--2 vads-u-margin-bottom--0 vads-u-font-size--h3"
className="vads-u-margin-top--2 vads-u-margin-bottom--0"
data-testid="travel-claim-details"
>
{appointmentDateTitle}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { Element } from 'platform/utilities/scroll';
import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
import environment from '@department-of-veterans-affairs/platform-utilities/environment';

import { HelpTextContent } from './HelpText';
import HelpTextContent from './HelpText';
import BreadCrumbs from './Breadcrumbs';
import ClaimDetailsContent from './ClaimDetailsContent';

Expand Down
129 changes: 129 additions & 0 deletions src/applications/travel-pay/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
export const STATUS_GROUPINGS = [
{
name: 'Saved or Incomplete',
description:
'These are claims that the Beneficiary Travel office cannot process. Either you have not submitted the claim, or you submitted a claim without required information.',
includes: ['Incomplete', 'Saved'],
},
{
name: 'Under VA Review',
description:
'These claims require action from VA. If VA needs more information from you, your Travel Clerk will contact you.',
includes: [
'In Process',
'Claim Submitted',
'In Manual Review',
'On Hold',
'Appealed',
],
},
{
name: 'Closed',
description:
'The Beneficiary Travel office finished their review of your claim and closed it. In some situations you can appeal Beneficiary Travel department’s decision and re-open a claim. If you have questions about why your claim has one of the following statuses, contact your local VAMC and ask for the Beneficiary Travel department.',
includes: [
'Partial Payment',
'Denied',
'Approved for Payment',
'Submitted for Payment',
'Fiscal Rescinded',
'Claim Paid',
'Payment Canceled',
],
},
];

export const STATUSES = [
{
name: 'Incomplete',
description:
'You submitted a claim without required expense information. You must provide the required information for BTSSS to process the claim.',
reasons: null,
},
{
name: 'Saved',
description:
'You saved changes to your claim, but you did not submit it to BTSSS for review. Submit the claim so BTSSS can begin processing your claim.',
reasons: null,
},
{
name: 'In Process',
description:
'You submitted a claim, and now BTSSS is reviewing your claim.',
reasons: null,
},
{
name: 'Claim Submitted',
description: 'You submitted a claim for a completed appointment.',
reasons: null,
},
{
name: 'In Manual Review',
description:
'Your claim requires a manual review by a Travel Clerk due to one or more of the following reasons:',
reasons: [
'Your claim includes receipts',
'The mileage is not equal to or less than the calculated limit',
'Your travel does not meet the eligibility requirements. For detailed information about your claim, contact your local VAMC and ask for the Beneficiary Travel department.',
],
},
{
name: 'On Hold',
description:
'You must provide the needed information for the claim to be processed. Your Travel Clerk will contact you when they put your claim on hold and tell you what additional information is required. For more information about your claim, please contact your local VAMC and ask for the Beneficiary Travel department.',
reasons: null,
},
{
name: 'Appealed',
description:
'You appealed the denial of your claim. The Travel Clerk will review your appeal.',
reasons: null,
},
{
name: 'Partial Payment',
description:
'The Travel Clerk determined the claim does not qualify for a full reimbursement. Instead, they approved a partial payment and a Partial Payment letter was sent to you.',
reasons: null,
},
{
name: 'Denied',
description:
'The Travel Clerk denied your claim for one or more of the following reasons:',
reasons: [
'Claim is not eligible for reimbursement.',
'The Travel Clerk could not verify the services in your claim.',
'Your appointment does not exist in VISTA, either because the VA clinic you went to did not enter it or you received care at a non-VA facility.',
'The Travel Clerk sent you a denial letter. The letter contains information on how to appeal the decision.',
],
},
{
name: 'Approved for Payment',
description:
'The Travel Clerk approved your claim for payment. The payment is pending and has not been paid.',
reasons: null,
},
{
name: 'Submitted for Payment',
description:
'The approved claim payment is assigned to the Financial Service Center (FSC) so that you can receive reimbursement.',
reasons: null,
},
{
name: 'Fiscal Rescinded',
description:
'The Financial Service Center (FSC) rejected payment. You will not be able to appeal this decision. For more detailed information about your claim, please contact your local VAMC and ask for the Beneficiary Travel department.',
reasons: null,
},
{
name: 'Claim Paid',
description:
'The reimbursement on the approved claim is paid to the submitter. Note that reimbursements for claims submitted by a Caregiver on behalf of a Veteran claimant are sent to the Caregiver’s address or deposited in the Caregiver’s account.',
reasons: null,
},
{
name: 'Payment Canceled',
description:
'The fund transfer did not complete because of the claimant’s bank. Payment has been canceled. You may create a new claim and reference the original claim number in the Notes section of the new claim.',
reasons: null,
},
];
30 changes: 20 additions & 10 deletions src/applications/travel-pay/containers/TravelPayStatusApp.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@ import { intersection, difference } from 'lodash';

import PropTypes from 'prop-types';
import { useFeatureToggle } from 'platform/utilities/feature-toggles/useFeatureToggle';
import { focusElement } from 'platform/utilities/ui';
import { Element } from 'platform/utilities/scroll';
import { scrollTo } from 'platform/utilities/ui/scroll';
import { toggleLoginModal } from 'platform/site-wide/user-nav/actions';
import BreadCrumbs from '../components/Breadcrumbs';
import TravelClaimCard from '../components/TravelClaimCard';
import TravelPayClaimFilters from '../components/TravelPayClaimFilters';
import HelpText from '../components/HelpText';
import HelpTextContent from '../components/HelpText';
import { getTravelClaims } from '../redux/actions';
import { getDateFilters } from '../util/dates';

Expand All @@ -29,6 +32,11 @@ export default function App({ children }) {

const filterInfoRef = useRef();

useEffect(() => {
focusElement('h1');
scrollTo('topScrollElement');
});

// TODO: utilize user info for authenticated requests
// and validating logged in status
// const user = useSelector(selectUser);
Expand Down Expand Up @@ -265,18 +273,20 @@ export default function App({ children }) {
}

return (
<>
<Element name="topScrollElement">
<article className="usa-grid-full vads-u-padding-bottom--0">
<BreadCrumbs />
<h1
className="claims-controller-title"
tabIndex="-1"
data-testid="header"
>
<h1 tabIndex="-1" data-testid="header">
Check your travel reimbursement claim status
</h1>
<div className="vads-l-col--12 medium-screen:vads-l-col--8">
<HelpText />
<h2 className="vads-u-font-size--h4">
You can use this tool to check the status of your VA travel claims.
</h2>
<va-additional-info trigger="How to manage your claims or get more information">
<HelpTextContent />
</va-additional-info>

{isLoading && (
<va-loading-indicator
label="Loading"
Expand All @@ -298,7 +308,7 @@ export default function App({ children }) {
travelClaims.length > 0 && (
<>
<div className="btsss-claims-sort-and-filter-container">
<h2>Your travel claims</h2>
<h2 className="vads-u-font-size--h4">Your travel claims</h2>
<p>
This list shows all the appointments you've filed a travel
claim for.
Expand Down Expand Up @@ -377,7 +387,7 @@ export default function App({ children }) {
</article>

{children}
</>
</Element>
);
}

Expand Down
Loading

0 comments on commit 67439c3

Please sign in to comment.