-
Notifications
You must be signed in to change notification settings - Fork 125
/
ApplicationDownloadLink.jsx
122 lines (108 loc) · 3.38 KB
/
ApplicationDownloadLink.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
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import * as Sentry from '@sentry/browser';
import { apiRequest } from 'platform/utilities/api';
import { focusElement } from 'platform/utilities/ui';
import environment from 'platform/utilities/environment';
import recordEvent from 'platform/monitoring/record-event';
import localStorage from 'platform/utilities/storage/localStorage';
import { downloadErrorsByCode } from '../definitions/content';
import { submitTransform } from '../utils/helpers';
import formConfig from '../config/form';
const apiURL = `${
environment.API_URL
}/v0/caregivers_assistance_claims/download_pdf`;
const ApplicationDownloadLink = ({ form }) => {
const [PDFLink, setPDFLink] = useState(null);
const [loading, isLoading] = useState(false);
const [errors, setErrors] = useState([]);
// define local use variables
const formData = submitTransform(formConfig, form);
const { veteranFullName: name } = form.data;
// fetch a custom error message based on status code
const errorMessage = () => {
const code = errors[0].status.split('')[0];
const { generic } = downloadErrorsByCode;
return downloadErrorsByCode[code] || generic;
};
const csrfTokenStored = localStorage.getItem('csrfToken');
// define our method of retrieving the link to download
const fetchDownloadUrl = body => {
isLoading(true);
// create the application link
apiRequest(apiURL, {
method: 'POST',
body,
headers: {
'Content-Type': 'application/json',
'Source-App-Name': window.appName,
'X-CSRF-Token': csrfTokenStored,
},
})
.then(response => response.blob())
.then(blob => {
const linkUrl = URL.createObjectURL(blob);
setPDFLink(linkUrl);
isLoading(false);
setErrors([]);
recordEvent({ event: 'caregivers-10-10cg-pdf-download--success' });
})
.catch(response => {
isLoading(false);
setErrors(response.errors);
recordEvent({ event: 'caregivers-10-10cg-pdf--failure' });
Sentry.withScope(scope => scope.setExtra('error', response));
});
};
// get application download link when form data is transformed
useEffect(
() => {
fetchDownloadUrl(formData);
},
[formData],
);
// apply focus to the error alert if we have errors set
useEffect(
() => {
if (errors?.length > 0) {
focusElement('.caregiver-download-error');
}
},
[errors],
);
// render loading indicator while application download is processing
if (loading) {
return (
<va-loading-indicator
label="Loading application"
message="Preparing your application for download..."
/>
);
}
// render error alert if file cannot download
if (errors?.length > 0) {
return (
<div className="caregiver-download-error">
<va-alert status="error" uswds>
<h3 slot="headline" className="vads-u-font-size--h4">
Something went wrong
</h3>
{errorMessage()}
</va-alert>
</div>
);
}
return (
<va-link
href={PDFLink}
text="Download your completed application"
filename={`10-10CG_${name.first}_${name.last}`}
filetype="PDF"
download
/>
);
};
ApplicationDownloadLink.propTypes = {
form: PropTypes.object,
};
export default ApplicationDownloadLink;