-
Notifications
You must be signed in to change notification settings - Fork 126
/
DebtLettersDownload.jsx
141 lines (134 loc) · 4.2 KB
/
DebtLettersDownload.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import { setPageFocus } from '../utils/page';
import DebtLettersTable from './DebtLettersTable';
import { DownloadLettersAlert } from './Alerts';
const DebtLettersDownload = ({
debtLinks,
isError,
isVBMSError,
hasDependentDebts,
}) => {
const showError = isError || isVBMSError;
useEffect(() => {
scrollToTop();
setPageFocus('h1');
});
return (
<div className="vads-l-row large-screen:vads-u-margin-x--neg2p5">
<div className="vads-u-font-family--sans">
<VaBreadcrumbs
label="Breadcrumb"
breadcrumbList={[
{
href: '/',
label: 'VA.gov home',
},
{
href: '/manage-va-debt',
label: 'Manage your VA debt',
},
{
href: '/manage-va-debt/your-debt',
label: 'Your VA debt',
},
{
href: '/manage-va-debt/your-debt/debt-letters',
label: 'Download debt letters',
},
]}
uswds
/>
</div>
<div className="large-screen:vads-l-col--8">
<h1
id="downloadDebtLetters"
className="vads-u-margin-bottom--2"
tabIndex="-1"
>
Download debt letters
</h1>
<p className="vads-u-font-weight--normal vads-u-color--gray-dark vads-u-margin-top--0 vads-u-margin-bottom--2 vads-u-font-size--lg">
Download your debt letters, learn your payment options, or find out
how to get help with your VA debts.
</p>
<DownloadLettersAlert />
<h2>Your debt letters</h2>
<DebtLettersTable
debtLinks={debtLinks}
hasDependentDebts={hasDependentDebts}
isError={showError}
/>
<div className="vads-u-margin-bottom--6 vads-u-margin-top--5">
<h2 className="vads-u-margin-y--0">
What if the letter I’m looking for isn’t listed here?
</h2>
<p className="vads-u-font-family--sans vads-u-margin-bottom--0">
If you’ve received a letter about a VA debt that isn’t listed here,
call us at
<va-telephone
contact="8008270648"
className="vads-u-margin-x--0p5"
/>
(or
<va-telephone
contact="6127136415"
international
className="vads-u-margin-x--0p5"
/>
from overseas). You can also call us to get information about your
resolved debts.
</p>
<p className="vads-u-font-family--sans">
For medical copay debt, please go to
<a
className="vads-u-margin-x--0p5"
href="/health-care/pay-copay-bill/"
>
pay your VA copay bill
</a>
to learn about your payment options.
</p>
<p>
<Link
className="vads-u-font-family--sans vads-u-font-size--sm"
to="/"
>
<i aria-hidden="true" className="fa fa-chevron-left" /> Return to
your list of debts.
</Link>
</p>
</div>
</div>
</div>
);
};
const mapStateToProps = ({ debtLetters }) => ({
hasDependentDebts: debtLetters.hasDependentDebts,
isError: debtLetters.isError,
isVBMSError: debtLetters.isVBMSError,
debtLinks: debtLetters.debtLinks,
});
DebtLettersDownload.propTypes = {
debtLinks: PropTypes.arrayOf(
PropTypes.shape({
documentId: PropTypes.string,
receivedAt: PropTypes.string,
typeDescription: PropTypes.string,
}),
),
hasDependentDebts: PropTypes.bool,
isError: PropTypes.bool,
isVBMSError: PropTypes.bool,
};
DebtLettersDownload.defaultProps = {
hasDependentDebts: false,
isError: false,
isVBMSError: false,
debtLinks: [],
};
export default connect(mapStateToProps)(DebtLettersDownload);