-
Notifications
You must be signed in to change notification settings - Fork 125
/
HTMLStatementPage.jsx
125 lines (120 loc) · 4.25 KB
/
HTMLStatementPage.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import PropTypes from 'prop-types';
import moment from 'moment';
import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
import Modals from '../components/Modals';
import StatementAddresses from '../components/StatementAddresses';
import AccountSummary from '../components/AccountSummary';
import StatementCharges from '../components/StatementCharges';
import DownloadStatement from '../components/DownloadStatement';
const HTMLStatementPage = ({ match }) => {
const selectedId = match.params.id;
const statements = useSelector(({ mcp }) => mcp.statements) ?? [];
const userFullName = useSelector(({ user }) => user.profile.userFullName);
const [selectedCopay] = statements.filter(({ id }) => id === selectedId);
const statementDate = moment(selectedCopay.pSStatementDate, 'MM-DD').format(
'MMMM D',
);
const title = `${statementDate} statement`;
const prevPage = `Copay bill for ${selectedCopay.station.facilityName}`;
const fullName = userFullName.middle
? `${userFullName.first} ${userFullName.middle} ${userFullName.last}`
: `${userFullName.first} ${userFullName.last}`;
useEffect(() => {
scrollToTop();
}, []);
return (
<>
<article>
<va-breadcrumbs
uswds="false"
className="vads-u-font-family--sans no-wrap"
>
<a href="/">Home</a>
<a href="/health-care">Health care</a>
<a href="/health-care/pay-copay-bill">Pay your VA copay bill</a>
<a
href={`/health-care/pay-copay-bill/your-current-balances/balance-details/${selectedId}`}
>
{prevPage}
</a>
<a href={`/balance-details/${selectedId}/statement-view`}>{title}</a>
</va-breadcrumbs>
<h1 data-testid="statement-page-title">{title}</h1>
<p
className="vads-u-font-size--h3 vads-u-margin-top--0 vads-u-margin-bottom--5"
data-testid="facility-name"
>
{`${selectedCopay?.station.facilityName}`}
</p>
<Link
className="vads-u-font-size--sm"
to={`/balance-details/${selectedId}`}
>
<i
className="fa fa-chevron-left vads-u-margin-right--1"
aria-hidden="true"
/>
<strong>Return to facility details</strong>
</Link>
<va-on-this-page className="vads-u-margin-top--0" />
<AccountSummary
currentBalance={selectedCopay.pHNewBalance}
newCharges={selectedCopay.pHTotCharges}
paymentsReceived={selectedCopay.pHTotCredits}
previousBalance={selectedCopay.pHPrevBal}
statementDate={statementDate}
/>
<StatementCharges
data-testid="statement-charges"
copay={selectedCopay}
/>
<div className="vads-u-margin-top--3">
<DownloadStatement
key={selectedId}
statementId={selectedId}
statementDate={selectedCopay.pSStatementDate}
fullName={fullName}
/>
</div>
<StatementAddresses
data-testid="statement-addresses"
copay={selectedCopay}
/>
<h2 id="if-i-have-questions">
What if I have questions about my statement?
</h2>
<p>
Contact the VA Health Resource Center at{' '}
<va-telephone contact="8664001238" /> (
<va-telephone contact={CONTACTS['711']} tty />
). We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.
</p>
<Modals title="Notice of rights and responsibilities">
<Modals.Rights />
</Modals>
<Link
className="vads-u-font-size--sm"
to={`/balance-details/${selectedId}`}
>
<i
className="fa fa-chevron-left vads-u-margin-right--1"
aria-hidden="true"
/>
<strong>Return to facility details</strong>
</Link>
</article>
</>
);
};
HTMLStatementPage.propTypes = {
match: PropTypes.shape({
params: PropTypes.shape({
id: PropTypes.string,
}),
}),
};
export default HTMLStatementPage;