-
Notifications
You must be signed in to change notification settings - Fork 125
/
DebtDetails.jsx
209 lines (201 loc) · 7.19 KB
/
DebtDetails.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { Link, useLocation } from 'react-router-dom';
import { connect } from 'react-redux';
import moment from 'moment';
import head from 'lodash/head';
import last from 'lodash/last';
import first from 'lodash/first';
import { VaBreadcrumbs } from '@department-of-veterans-affairs/web-components/react-bindings';
import scrollToTop from 'platform/utilities/ui/scrollToTop';
import HowDoIPay from './HowDoIPay';
import NeedHelp from './NeedHelp';
import { setPageFocus, getCurrentDebt, currency } from '../utils/page';
import OnThisPageLinks from './OnThisPageLinks';
import { renderAdditionalInfo } from '../const/diary-codes';
import HistoryTable from './HistoryTable';
import {
deductionCodes,
renderWhyMightIHaveThisDebt,
} from '../const/deduction-codes';
const DebtDetails = ({ selectedDebt, debts }) => {
const approvedLetterCodes = ['100', '101', '102', '109', '117', '123', '130'];
const location = useLocation();
const currentDebt = getCurrentDebt(selectedDebt, debts, location);
const mostRecentHistory = head(currentDebt?.debtHistory);
const whyContent = renderWhyMightIHaveThisDebt(currentDebt.deductionCode);
const dateUpdated = last(currentDebt.debtHistory)?.date;
const dateFirstNotice = first(currentDebt.debtHistory)?.date;
const filteredHistory = currentDebt.debtHistory
?.filter(history => approvedLetterCodes.includes(history.letterCode))
.reverse();
const hasFilteredHistory = filteredHistory && filteredHistory.length > 0;
const additionalInfo = renderAdditionalInfo(
currentDebt.diaryCode,
mostRecentHistory?.date,
currentDebt.benefitType,
);
useEffect(() => {
scrollToTop();
setPageFocus('h1');
}, []);
if (Object.keys(currentDebt).length === 0) {
window.location.replace('/manage-va-debt/your-debt');
return (
<div className="vads-u-font-family--sans vads-u-margin--0 vads-u-padding--1">
<va-loading-indicator
label="Loading"
message="Please wait while we load the application for you."
set-focus
/>
</div>
);
}
return (
<div className="vads-u-display--flex vads-u-flex-direction--column">
<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-detail',
label: 'Details',
},
]}
uswds
/>
<h1
className="vads-u-font-family--serif vads-u-margin-bottom--2"
tabIndex="-1"
>
Your {deductionCodes[currentDebt.deductionCode]}
</h1>
<section className="vads-l-row">
<div className="vads-u-display--flex vads-u-flex-direction--column vads-u-padding-right--2p5 vads-l-col--12 medium-screen:vads-l-col--8 vads-u-font-family--sans">
{dateUpdated && (
<p className="va-introtext vads-u-margin-top--0">
Updated on
<span className="vads-u-margin-left--0p5">
{moment(dateUpdated, 'MM-DD-YYYY').format('MMMM D, YYYY')}
</span>
</p>
)}
<dl className="details-table">
<div className="details-row">
<dt className="details-title">Amount owed:</dt>
<dd className="details-data">
{currency.format(parseFloat(currentDebt.currentAr))}
</dd>
</div>
<div className="details-row">
<dt className="details-title">Original amount:</dt>
<dd className="details-data">
{currency.format(parseFloat(currentDebt.originalAr))}
</dd>
</div>
{dateFirstNotice && (
<div className="details-row">
<dt className="details-title">Date of first notice:</dt>
<dd className="details-data">
{moment(dateFirstNotice, 'MM-DD-YYYY').format('MMMM D, YYYY')}
</dd>
</div>
)}
<div className="details-row">
<dt className="details-title">Collection status:</dt>
<dd className="details-data">{additionalInfo.status}</dd>
</div>
</dl>
<va-alert
status="info"
class="vads-u-margin-bottom--4 vads-u-font-size--base"
background-only
>
{additionalInfo.nextStep}
</va-alert>
{whyContent && (
<va-additional-info trigger="Why might I have this debt?">
{whyContent}
</va-additional-info>
)}
<OnThisPageLinks isDetailsPage hasHistory={hasFilteredHistory} />
{hasFilteredHistory && (
<>
<h2
id="debtLetterHistory"
className="vads-u-margin-top--5 vads-u-margin-bottom--0"
>
Debt letter history
</h2>
<p className="vads-u-margin-y--2">
You can check the status or download the letters for this debt.
</p>
<p className="vads-u-margin-top--0 vads-u-margin-bottom--0">
<strong>Note:</strong> The content of the debt letters below may
not include recent updates to your debt reflected above. If you
have any questions about your debt history, please contact the
Debt Management Center at{' '}
<va-telephone
className="vads-u-margin-left--0p5"
contact="8008270648"
/>
.
</p>
<HistoryTable history={filteredHistory} />
<h3 id="downloadDebtLetters" className="vads-u-margin-top--0">
Download debt letters
</h3>
<p className="vads-u-margin-bottom--0">
You can download some of your letters for education,
compensation and pension debt.
</p>
<Link to="/debt-letters" className="vads-u-margin-top--1">
Download letters related to your VA debt
</Link>
</>
)}
<HowDoIPay />
<NeedHelp />
<Link className="vads-u-margin-top--4" to="/">
<i aria-hidden="true" className="fa fa-chevron-left" /> Return to
your list of debts.
</Link>
</div>
</section>
</div>
);
};
const mapStateToProps = ({ debtLetters }) => ({
selectedDebt: debtLetters?.selectedDebt,
debts: debtLetters.debts,
});
DebtDetails.defaultProps = {
selectedDebt: {
debtHistory: [],
},
};
DebtDetails.propTypes = {
debts: PropTypes.array,
selectedDebt: PropTypes.shape({
currentAr: PropTypes.number,
debtHistory: PropTypes.arrayOf(
PropTypes.shape({
date: PropTypes.string,
}),
),
deductionCode: PropTypes.string,
originalAr: PropTypes.number,
}),
};
export default connect(mapStateToProps)(DebtDetails);