[Resolve Errors & Warnings] Download Validation Report

src/api/requests/downloadValidationReport.ts

@@ -0,0 +1,51 @@
+import type { SblAuthProperties } from 'api/useSblAuth';
+import axios from 'axios';
+import type { FilingPeriodType } from 'types/filingTypes';
+
+export interface DownloadValidationReportProperties {
+  auth: SblAuthProperties;
+  lei: string;
+  submissionId: number;
+  filingPeriod: FilingPeriodType;
+}
+
+export const downloadValidationReport = async ({
+  auth,
+  lei,
+  filingPeriod,
+  submissionId,
+}: DownloadValidationReportProperties): Promise<void> => {
+  try {
+    await axios({
+      headers: {
+        Authorization: `Bearer ${auth.user?.access_token}`,
+        'Cache-Control': 'no-cache',
+        Pragma: 'no-cache',
+        Expires: '0',
+      },
+      url: `/v1/filing/institutions/${lei}/filings/${filingPeriod}/submissions/${submissionId}/report`,
+      method: 'GET',
+      responseType: 'blob',
+    }).then(response => {
+      const url = window.URL.createObjectURL(
+        new Blob([response.data], { type: 'text/csv;charset=utf-8' }),
+      );
+      const link = document.createElement('a');
+      link.href = url;
+      link.setAttribute(
+        'download',
+        `${lei}-${filingPeriod}-submission-${submissionId}-validation_report.csv`,
+      );
+      document.body.append(link);
+      link.click();
+
+      // clean up "a" element & remove ObjectURL
+      link.remove();
+      URL.revokeObjectURL(url);
+    });
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export default downloadValidationReport;

src/pages/Filing/FilingApp/FilingErrors/index.tsx

@@ -1,9 +1,8 @@
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
-import { ListLink } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
-import { Button, List, TextIntroduction } from 'design-system-react';
+import { Button, TextIntroduction } from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
 import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import FilingErrorsAlerts from 'pages/Filing/FilingApp/FilingErrors/FilingErrorsAlerts';
@@ -13,6 +12,7 @@ import { useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
+import FilingFieldLinks from '../FilingFieldLinks';
 
 function FilingErrors(): JSX.Element {
   const { lei, year } = useParams();
@@ -130,16 +130,15 @@ function FilingErrors(): JSX.Element {
                 the validation to fail. Once you’ve identified the underlying
                 problems, make the corrections to your register, and upload a
                 new file.
-                {!errorGetSubmissionLatest && (
-                  <div id='resolve-errors-listlinks' className='mt-[1.875rem]'>
-                    <List isLinks>
-                      <ListLink href='#'>Download validation report</ListLink>
-                      <ListLink href={`/filing/${year}/${lei}/upload`}>
-                        Upload a new file
-                      </ListLink>
-                    </List>
-                  </div>
-                )}
+                {!errorGetSubmissionLatest &&
+                actualDataGetSubmissionLatest?.id ? (
+                  <FilingFieldLinks
+                    id='resolve-errors-listlinks'
+                    lei={lei}
+                    filingPeriod={year}
+                    submissionId={actualDataGetSubmissionLatest.id}
+                  />
+                ) : null}
               </>
             }
           />

src/pages/Filing/FilingApp/FilingFieldLinks.tsx

@@ -0,0 +1,45 @@
+import downloadValidationReport from 'api/requests/downloadValidationReport';
+import useSblAuth from 'api/useSblAuth';
+import { ListLink } from 'components/Link';
+import { Button, List } from 'design-system-react';
+import type { FilingPeriodType } from 'types/filingTypes';
+
+interface FilingFieldLinksProperties {
+  id: string;
+  lei: string;
+  submissionId: number;
+  filingPeriod: FilingPeriodType;
+}
+
+function FilingFieldLinks({
+  lei,
+  filingPeriod,
+  id,
+  submissionId,
+  className,
+  ...others
+}: FilingFieldLinksProperties & JSX.IntrinsicElements['div']): JSX.Element {
+  const auth = useSblAuth();
+
+  const onHandleDownloadClick = async (): Promise<void> => {
+    await downloadValidationReport({ auth, lei, filingPeriod, submissionId });
+  };
+  return (
+    <div id={id} className={`mt-[1.875rem] ${className}`} {...others}>
+      <List isLinks>
+        <Button
+          asLink
+          className='m-list_link mb-2'
+          label='Download validation report'
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onClick={onHandleDownloadClick}
+        />
+        <ListLink href={`/filing/${filingPeriod}/${lei}/upload`}>
+          Upload a new file
+        </ListLink>
+      </List>
+    </div>
+  );
+}
+
+export default FilingFieldLinks;

src/pages/Filing/FilingApp/FilingWarnings/index.tsx

@@ -1,9 +1,8 @@
 import FormButtonGroup from 'components/FormButtonGroup';
 import FormHeaderWrapper from 'components/FormHeaderWrapper';
 import FormWrapper from 'components/FormWrapper';
-import { ListLink } from 'components/Link';
 import { LoadingContent } from 'components/Loading';
-import { Button, List, TextIntroduction } from 'design-system-react';
+import { Button, TextIntroduction } from 'design-system-react';
 import FieldSummary from 'pages/Filing/FilingApp/FieldSummary';
 import { getErrorsWarningsSummary } from 'pages/Filing/FilingApp/FilingErrors/FilingErrors.helpers';
 import { FilingSteps } from 'pages/Filing/FilingApp/FilingSteps';
@@ -12,6 +11,7 @@ import { useMemo } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import useGetSubmissionLatest from 'utils/useGetSubmissionLatest';
 import useInstitutionDetails from 'utils/useInstitutionDetails';
+import FilingFieldLinks from '../FilingFieldLinks';
 import FilingWarningsAlerts from './FilingWarningsAlerts';
 
 function FilingWarnings(): JSX.Element {
@@ -91,19 +91,15 @@ function FilingWarnings(): JSX.Element {
                 validation report to determine if the values flagged with
                 warning validations require action. If there are underlying
                 problems, make the corrections, and upload a new file.
-                {!errorGetSubmissionLatest && (
-                  <div
-                    id='resolve-warnings-listlinks'
-                    className='mt-[1.875rem]'
-                  >
-                    <List isLinks>
-                      <ListLink href='#'>Download validation report</ListLink>
-                      <ListLink href={`/filing/${year}/${lei}/upload`}>
-                        Upload a new file
-                      </ListLink>
-                    </List>
-                  </div>
-                )}
+                {!errorGetSubmissionLatest &&
+                actualDataGetSubmissionLatest?.id ? (
+                  <FilingFieldLinks
+                    id='resolve-errors-listlinks'
+                    lei={lei}
+                    filingPeriod={year}
+                    submissionId={actualDataGetSubmissionLatest.id}
+                  />
+                ) : null}
               </>
             }
           />