Skip to content

Commit 65df508

Browse files
jquispe-oddballjquispe-oddball
authored
[art/100987] - qa feedback + content changes (#34320)
* 100987 - qa feedback + content changes * 100987 - fix misspelling
1 parent 189ad34 commit 65df508

File tree

3 files changed

+192
-145
lines changed

3 files changed

+192
-145
lines changed

‎src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx

+121-128
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,24 @@ const DECISION_TYPES = {
1919
const DECLINATION_OPTIONS = {
2020
DECLINATION_HEALTH_RECORDS_WITHHELD: {
2121
type: DECISION_TYPES.DECLINATION,
22-
reason:
23-
"I decline the request, because the claimant didn't provide access to health records",
22+
reason: "Decline, because change of address isn't authorized",
2423
},
2524
DECLINATION_ADDRESS_CHANGE_WITHHELD: {
2625
type: DECISION_TYPES.DECLINATION,
27-
reason:
28-
"I decline the request, because the claimant didn't allow me to change their address",
26+
reason: 'Decline, because protected medical record access is limited',
2927
},
3028
DECLINATION_BOTH_WITHHELD: {
3129
type: DECISION_TYPES.DECLINATION,
3230
reason:
33-
'I decline the request, because the claimant did not provide access to change address and to health records',
31+
"Decline, because change of address isn't authorized and protected medical record access is limited",
3432
},
3533
DECLINATION_NOT_ACCEPTING_CLIENTS: {
3634
type: DECISION_TYPES.DECLINATION,
37-
reason:
38-
'I decline the request, because the VSO is not currently accepting new clients',
35+
reason: "Decline, because the VSO isn't accepting new clients",
3936
},
4037
DECLINATION_OTHER: {
4138
type: DECISION_TYPES.DECLINATION,
42-
reason: 'I decline for another reason',
39+
reason: 'Decline, because of another reason',
4340
},
4441
};
4542

@@ -55,8 +52,10 @@ const Authorized = () => {
5552
return (
5653
<span>
5754
<va-icon
55+
height={20}
56+
maxWidth={20}
5857
icon="check_circle"
59-
class="vads-u-color--success poa-request__card-icon"
58+
class="vads-u-color--success-dark poa-request__card-icon"
6059
/>
6160
Authorized
6261
</span>
@@ -67,8 +66,10 @@ const NoAccess = () => {
6766
return (
6867
<span>
6968
<va-icon
69+
height={20}
70+
maxWidth={20}
7071
icon="warning"
71-
class="vads-u-color--error poa-request__card-icon"
72+
class="vads-u-color--warning-dark poa-request__card-icon"
7273
/>
7374
No Access
7475
</span>
@@ -79,8 +80,10 @@ const AccessToSome = () => {
7980
return (
8081
<span>
8182
<va-icon
83+
height={20}
84+
maxWidth={20}
8285
icon="warning"
83-
class="vads-u-color--error poa-request__card-icon"
86+
class="vads-u-color--warning-dark poa-request__card-icon"
8487
/>
8588
Access to some
8689
</span>
@@ -128,21 +131,26 @@ const POARequestDetailsPage = () => {
128131
} = poaRequest.powerOfAttorneyForm.authorizations;
129132
return (
130133
<section className="poa-request-details">
131-
<h1 data-testid="poa-request-details-header">POA request</h1>
134+
<h1
135+
className="poa-request-details__header"
136+
data-testid="poa-request-details-header"
137+
>
138+
POA request
139+
</h1>
132140
<h2 className="poa-request-details__name">
133141
{claimantLastName}, {claimantFirstName}
134-
<span
135-
className={`usa-label vads-u-font-family--sans poa-request-details__status ${poaStatus}`}
136-
>
137-
{formatStatus(poaStatus)}
138-
</span>
142+
{poaStatus !== 'expired' && (
143+
<span
144+
className={`usa-label vads-u-font-family--sans poa-request-details__status ${poaStatus}`}
145+
>
146+
{formatStatus(poaStatus)}
147+
</span>
148+
)}
139149
</h2>
140150

141151
<ul className="poa-request-details__list">
142152
<li className="poa-request-details__list-item">
143-
<p className="poa-request-details__title">
144-
Requesting representation through
145-
</p>
153+
<p className="poa-request-details__title">Requested representative</p>
146154
<p className="poa-request-details__subtitle">
147155
{poaRequest?.powerOfAttorneyHolder?.name}
148156
</p>
@@ -158,20 +166,18 @@ const POARequestDetailsPage = () => {
158166
<li className="poa-request-details__list-item">
159167
{poaStatus === 'declination' && (
160168
<>
161-
<p className="poa-request-details__title">
162-
POA request declined on
163-
</p>
164-
{resolutionDate(poaRequest.resolution?.createdAt, poaStatus.id)}
169+
<p className="poa-request-details__title">Request declined on</p>
170+
{resolutionDate(poaRequest.resolution?.created_at, poaStatus.id)}
165171
</>
166172
)}
167173
{poaStatus === 'acceptance' && (
168174
<>
169175
<p className="poa-request-details__title">
170176
<va-icon
171177
icon="check_circle"
172-
class="vads-u-color--success poa-request__card-icon"
178+
class="vads-u-color--success-dark poa-request__card-icon"
173179
/>{' '}
174-
POA request accepted on
180+
Request accepted on
175181
</p>
176182
{resolutionDate(poaRequest.resolution?.createdAt, poaStatus.id)}
177183
</>
@@ -181,9 +187,9 @@ const POARequestDetailsPage = () => {
181187
<p className="poa-request-details__title">
182188
<va-icon
183189
icon="warning"
184-
class="vads-u-color--error poa-request__card-icon"
190+
class="vads-u-color--warning-dark poa-request__card-icon"
185191
/>{' '}
186-
POA request expired on
192+
Request expired on
187193
</p>
188194
{resolutionDate(poaRequest.resolution?.createdAt, poaStatus.id)}
189195
</>
@@ -200,7 +206,7 @@ const POARequestDetailsPage = () => {
200206
aria-hidden="true"
201207
/>
202208
)}
203-
POA request expires on
209+
Request expires on
204210
</p>
205211
{resolutionDate(poaRequest?.expiresAt, poaStatus.id)}
206212
</>
@@ -216,110 +222,106 @@ const POARequestDetailsPage = () => {
216222

217223
<div className="poa-request-details__info">
218224
<h2>Claimant information</h2>
219-
<table className="poa-request-details__table">
220-
<tr>
221-
<th scope="row">Relationship to veteran</th>
222-
<td>{relationship}</td>
223-
</tr>
224-
<tr>
225-
<th scope="row">Address</th>
226-
<td>
225+
<ul className="poa-request-details__list poa-request-details__list--info">
226+
<li>
227+
<p>Relationship to veteran</p>
228+
<p>{relationship}</p>
229+
</li>
230+
<li>
231+
<p>Address</p>
232+
<p>
227233
{city}, {state}, {zipCode}
228-
</td>
229-
</tr>
230-
<tr>
231-
<th scope="row">Phone</th>
232-
<td>{phone}</td>
233-
</tr>
234-
<tr>
235-
<th scope="row">Email</th>
236-
<td>{email}</td>
237-
</tr>
234+
</p>
235+
</li>
236+
<li>
237+
<p>Phone</p>
238+
<p>{phone}</p>
239+
</li>
240+
<li>
241+
<p>Email</p>
242+
<p>{email}</p>
243+
</li>
238244
{relationship === 'Self' && (
239245
<>
240-
<tr>
241-
<th scope="row">Social security number</th>
242-
<td>{poaRequest?.powerOfAttorneyForm?.claimant?.ssn}</td>
243-
</tr>
244-
<tr>
245-
<th scope="row">VA file number</th>
246-
<td>
247-
{poaRequest?.powerOfAttorneyForm?.claimant?.va_file_number}
248-
</td>
249-
</tr>
246+
<li>
247+
<p>Social Security number</p>
248+
<p>{poaRequest?.power_of_attorney_form?.claimant?.ssn}</p>
249+
</li>
250+
<li>
251+
<p>VA file number</p>
252+
<p>
253+
{poaRequest?.power_of_attorney_form?.claimant?.va_file_number}
254+
</p>
255+
</li>
250256
</>
251257
)}
252-
</table>
258+
</ul>
253259

254260
{/* if there is a claimant that is a relative/friend to the veteran, their information will populate in the previous table under claimant,
255261
and the veteran information will show up here. if the veteran is filing themselves, they will appear as the claimant */}
256262
{poaRequest.powerOfAttorneyForm.veteran && (
257263
<>
258264
<h2>Veteran information</h2>
259-
<table className="poa-request-details__table">
260-
<tr>
261-
<th scope="row">Name</th>
262-
<td>
263-
{poaRequest?.powerOfAttorneyForm?.veteran?.name?.last},{' '}
264-
{poaRequest?.powerOfAttorneyForm?.veteran?.name?.first}
265-
</td>
266-
</tr>
267-
<tr>
268-
<th scope="row">Social security number</th>
269-
<td>{poaRequest?.powerOfAttorneyForm?.veteran?.ssn}</td>
270-
</tr>
271-
<tr>
272-
<th scope="row">VA file number</th>
273-
<td>
274-
{poaRequest?.powerOfAttorneyForm?.veteran?.vaFileNumber}
275-
</td>
276-
</tr>
277-
</table>
265+
<ul className="poa-request-details__list poa-request-details__list--info">
266+
<li>
267+
<p>Name</p>
268+
<p>
269+
{poaRequest?.power_of_attorney_form?.veteran?.name?.last},{' '}
270+
{poaRequest?.power_of_attorney_form?.veteran?.name?.first}
271+
</p>
272+
</li>
273+
<li>
274+
<p>Social security number</p>
275+
<p>{poaRequest?.power_of_attorney_form?.veteran?.ssn}</p>
276+
</li>
277+
<li>
278+
<p>VA file number</p>
279+
<p>
280+
{poaRequest?.power_of_attorney_form?.veteran?.va_file_number}
281+
</p>
282+
</li>
283+
</ul>
278284
</>
279285
)}
280286

281287
<h2>Authorization information</h2>
282-
<table className="poa-request-details__table">
283-
<tr>
284-
<th scope="row">Change of address</th>
285-
<td>
288+
<ul className="poa-request-details__list poa-request-details__list--info">
289+
<li>
290+
<p>Change of address</p>
291+
<p>
286292
{checkAuthorizations(
287293
poaRequest?.powerOfAttorneyForm.authorizations.address_change,
288294
)}
289-
</td>
290-
</tr>
291-
<tr>
292-
<th scope="row">Protected medical records</th>
293-
<td>
294-
{recordDisclosureLimitations.length === 0 && <NoAccess />}
295-
{recordDisclosureLimitations.length < 4 &&
296-
recordDisclosureLimitations.length > 0 && <AccessToSome />}
297-
{recordDisclosureLimitations.length === 4 && <Authorized />}
298-
</td>
299-
</tr>
300-
<tr>
301-
<th scope="row">Alcoholism or alcohol abuse records</th>
302-
<td>
303-
{checkLimitations(recordDisclosureLimitations, 'ALCOHOLISM')}
304-
</td>
305-
</tr>
306-
<tr>
307-
<th scope="row">Drug abuse records</th>
308-
<td>
309-
{checkLimitations(recordDisclosureLimitations, 'DRUG_ABUSE')}
310-
</td>
311-
</tr>
312-
<tr>
313-
<th scope="row">HIV records</th>
314-
<td>{checkLimitations(recordDisclosureLimitations, 'HIV')}</td>
315-
</tr>
316-
<tr>
317-
<th scope="row">Sickle cell anemia records</th>
318-
<td>
295+
</p>
296+
</li>
297+
<li>
298+
<p>Protected medical records</p>
299+
<p>
300+
{recordDisclosureLimitations.lengp === 0 && <NoAccess />}
301+
{recordDisclosureLimitations.lengp < 4 &&
302+
recordDisclosureLimitations.lengp > 0 && <AccessToSome />}
303+
{recordDisclosureLimitations.lengp === 4 && <Authorized />}
304+
</p>
305+
</li>
306+
<li>
307+
<p>Alcoholism or alcohol abuse records</p>
308+
<p>{checkLimitations(recordDisclosureLimitations, 'ALCOHOLISM')}</p>
309+
</li>
310+
<li>
311+
<p>Drug abuse records</p>
312+
<p>{checkLimitations(recordDisclosureLimitations, 'DRUG_ABUSE')}</p>
313+
</li>
314+
<li>
315+
<p>HIV records</p>
316+
<p>{checkLimitations(recordDisclosureLimitations, 'HIV')}</p>
317+
</li>
318+
<li>
319+
<p>Sickle cell anemia records</p>
320+
<p>
319321
{checkLimitations(recordDisclosureLimitations, 'SICKLE_CELL')}
320-
</td>
321-
</tr>
322-
</table>
322+
</p>
323+
</li>
324+
</ul>
323325

324326
{poaStatus === 'Pending' && (
325327
<Form
@@ -333,15 +335,18 @@ const POARequestDetailsPage = () => {
333335
>
334336
<VaRadio
335337
header-aria-describedby={null}
336-
hint=""
337338
label="Do you accept or decline this POA request?"
338339
label-header-level="4"
339340
class="poa-request-details__form-label"
340341
onVaValueChange={handleChange}
341342
required
342343
>
344+
<p>
345+
We’ll send the claimant an email letting them know your
346+
decision.
347+
</p>
343348
<VaRadioOption
344-
label="I accept the request"
349+
label="Accept"
345350
value="ACCEPTANCE"
346351
name="decision"
347352
/>
@@ -356,18 +361,6 @@ const POARequestDetailsPage = () => {
356361
))}
357362
</VaRadio>
358363

359-
<va-alert
360-
status="info"
361-
class="poa-request-details__form-alert"
362-
visible
363-
aria-live="polite"
364-
slim
365-
>
366-
<p className="vads-u-margin-y--0">
367-
We will send the claimant an email letting them know your
368-
decision.
369-
</p>
370-
</va-alert>
371364
{/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */}
372365
<button
373366
type="submit"

0 commit comments

Comments
 (0)