From 1680023493ad2d6932144fdaf9cc6dbb9924f7ca Mon Sep 17 00:00:00 2001
From: Courtney Myers <courtney.myers@erg.com>
Date: Thu, 23 Jan 2025 16:32:51 -0500
Subject: [PATCH] Update all forms to use the useSubmissionPDFQuery() custom
 hook and include a button for downloading a PDF of the submission

---
 app/client/src/routes/crf2022.tsx | 34 ++++++++++++++++++++++++++++++-
 app/client/src/routes/frf2022.tsx | 32 ++++++++++++++++++++++++++++-
 app/client/src/routes/frf2023.tsx | 32 ++++++++++++++++++++++++++++-
 app/client/src/routes/frf2024.tsx | 32 ++++++++++++++++++++++++++++-
 app/client/src/routes/prf2022.tsx | 34 ++++++++++++++++++++++++++++++-
 app/client/src/routes/prf2023.tsx | 34 ++++++++++++++++++++++++++++++-
 app/client/src/routes/prf2024.tsx | 34 ++++++++++++++++++++++++++++++-
 7 files changed, 225 insertions(+), 7 deletions(-)

diff --git a/app/client/src/routes/crf2022.tsx b/app/client/src/routes/crf2022.tsx
index 10a5be3a..7bd63b93 100644
--- a/app/client/src/routes/crf2022.tsx
+++ b/app/client/src/routes/crf2022.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
@@ -40,6 +41,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2022/crf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2022/crf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2022/crf-submission/${rebateId}`;
@@ -129,6 +131,12 @@ function CloseOutRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(rebateId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2022",
+    formType: "crf",
+    mongoId: submission?._id || "",
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -243,6 +251,30 @@ function CloseOutRequestForm(props: { email: string }) {
         </li>
       </ul>
 
+      {submission?._id && (
+        <p>
+          <button
+            className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+            type="button"
+            disabled={pdfQuery.isFetching}
+            onClick={(_ev) => pdfQuery.refetch()}
+          >
+            <span className="display-flex flex-align-center">
+              <svg
+                className="usa-icon"
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use href={`${icons}#arrow_downward`} />
+              </svg>
+              <span className="margin-left-1">Download PDF</span>
+              {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+            </span>
+          </button>
+        </p>
+      )}
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/frf2022.tsx b/app/client/src/routes/frf2022.tsx
index a0f9c72e..cfbaa797 100644
--- a/app/client/src/routes/frf2022.tsx
+++ b/app/client/src/routes/frf2022.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
@@ -41,6 +42,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2022/frf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2022/frf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2022/frf-submission/${mongoId}`;
@@ -142,6 +144,12 @@ function FundingRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(mongoId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2022",
+    formType: "frf",
+    mongoId,
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -391,6 +399,28 @@ function FundingRequestForm(props: { email: string }) {
         )}
       </ul>
 
+      <p>
+        <button
+          className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+          type="button"
+          disabled={pdfQuery.isFetching}
+          onClick={(_ev) => pdfQuery.refetch()}
+        >
+          <span className="display-flex flex-align-center">
+            <svg
+              className="usa-icon"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use href={`${icons}#arrow_downward`} />
+            </svg>
+            <span className="margin-left-1">Download PDF</span>
+            {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+          </span>
+        </button>
+      </p>
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/frf2023.tsx b/app/client/src/routes/frf2023.tsx
index 9683e325..3c475b5b 100644
--- a/app/client/src/routes/frf2023.tsx
+++ b/app/client/src/routes/frf2023.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
@@ -41,6 +42,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2023/frf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2023/frf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2023/frf-submission/${mongoId}`;
@@ -128,6 +130,12 @@ function FundingRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(mongoId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2023",
+    formType: "frf",
+    mongoId,
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -377,6 +385,28 @@ function FundingRequestForm(props: { email: string }) {
         )}
       </ul>
 
+      <p>
+        <button
+          className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+          type="button"
+          disabled={pdfQuery.isFetching}
+          onClick={(_ev) => pdfQuery.refetch()}
+        >
+          <span className="display-flex flex-align-center">
+            <svg
+              className="usa-icon"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use href={`${icons}#arrow_downward`} />
+            </svg>
+            <span className="margin-left-1">Download PDF</span>
+            {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+          </span>
+        </button>
+      </p>
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/frf2024.tsx b/app/client/src/routes/frf2024.tsx
index c34d8425..dedac67c 100644
--- a/app/client/src/routes/frf2024.tsx
+++ b/app/client/src/routes/frf2024.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useDialogActions } from "@/contexts/dialog";
@@ -41,6 +42,7 @@ function useFormioSubmissionQueryAndMutation(mongoId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2024/frf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2024/frf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2024/frf-submission/${mongoId}`;
@@ -128,6 +130,12 @@ function FundingRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(mongoId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2024",
+    formType: "frf",
+    mongoId,
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -377,6 +385,28 @@ function FundingRequestForm(props: { email: string }) {
         )}
       </ul>
 
+      <p>
+        <button
+          className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+          type="button"
+          disabled={pdfQuery.isFetching}
+          onClick={(_ev) => pdfQuery.refetch()}
+        >
+          <span className="display-flex flex-align-center">
+            <svg
+              className="usa-icon"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use href={`${icons}#arrow_downward`} />
+            </svg>
+            <span className="margin-left-1">Download PDF</span>
+            {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+          </span>
+        </button>
+      </p>
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/prf2022.tsx b/app/client/src/routes/prf2022.tsx
index 05921b2c..1bda0afa 100644
--- a/app/client/src/routes/prf2022.tsx
+++ b/app/client/src/routes/prf2022.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
@@ -40,6 +41,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2022/prf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2022/prf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2022/prf-submission/${rebateId}`;
@@ -129,6 +131,12 @@ function PaymentRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(rebateId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2022",
+    formType: "prf",
+    mongoId: submission?._id || "",
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -264,6 +272,30 @@ function PaymentRequestForm(props: { email: string }) {
         </li>
       </ul>
 
+      {submission?._id && (
+        <p>
+          <button
+            className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+            type="button"
+            disabled={pdfQuery.isFetching}
+            onClick={(_ev) => pdfQuery.refetch()}
+          >
+            <span className="display-flex flex-align-center">
+              <svg
+                className="usa-icon"
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use href={`${icons}#arrow_downward`} />
+              </svg>
+              <span className="margin-left-1">Download PDF</span>
+              {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+            </span>
+          </button>
+        </p>
+      )}
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/prf2023.tsx b/app/client/src/routes/prf2023.tsx
index a8a34267..1ec178ec 100644
--- a/app/client/src/routes/prf2023.tsx
+++ b/app/client/src/routes/prf2023.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
@@ -40,6 +41,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2023/prf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2023/prf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2023/prf-submission/${rebateId}`;
@@ -129,6 +131,12 @@ function PaymentRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(rebateId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2023",
+    formType: "prf",
+    mongoId: submission?._id || "",
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -262,6 +270,30 @@ function PaymentRequestForm(props: { email: string }) {
         </li>
       </ul>
 
+      {submission?._id && (
+        <p>
+          <button
+            className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+            type="button"
+            disabled={pdfQuery.isFetching}
+            onClick={(_ev) => pdfQuery.refetch()}
+          >
+            <span className="display-flex flex-align-center">
+              <svg
+                className="usa-icon"
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use href={`${icons}#arrow_downward`} />
+              </svg>
+              <span className="margin-left-1">Download PDF</span>
+              {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+            </span>
+          </button>
+        </p>
+      )}
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>
diff --git a/app/client/src/routes/prf2024.tsx b/app/client/src/routes/prf2024.tsx
index 52e9e251..1c32bea9 100644
--- a/app/client/src/routes/prf2024.tsx
+++ b/app/client/src/routes/prf2024.tsx
@@ -19,6 +19,7 @@ import {
   useContentData,
   useConfigData,
   useBapSamData,
+  useSubmissionPDFQuery,
   useSubmissionsQueries,
   useSubmissions,
   submissionNeedsEdits,
@@ -27,7 +28,7 @@ import {
   entityHasDebtSubjectToOffset,
   getUserInfo,
 } from "@/utilities";
-import { Loading } from "@/components/loading";
+import { Loading, LoadingButtonIcon } from "@/components/loading";
 import { Message } from "@/components/message";
 import { MarkdownContent } from "@/components/markdownContent";
 import { useNotificationsActions } from "@/contexts/notifications";
@@ -40,6 +41,7 @@ function useFormioSubmissionQueryAndMutation(rebateId: string | undefined) {
 
   useEffect(() => {
     queryClient.resetQueries({ queryKey: ["formio/2024/prf-submission"] });
+    queryClient.resetQueries({ queryKey: ["formio/2024/prf-pdf"] });
   }, [queryClient]);
 
   const url = `${serverUrl}/api/formio/2024/prf-submission/${rebateId}`;
@@ -129,6 +131,12 @@ function PaymentRequestForm(props: { email: string }) {
   const { query, mutation } = useFormioSubmissionQueryAndMutation(rebateId);
   const { userAccess, formSchema, submission } = query.data ?? {};
 
+  const pdfQuery = useSubmissionPDFQuery({
+    rebateYear: "2024",
+    formType: "prf",
+    mongoId: submission?._id || "",
+  });
+
   /**
    * Stores when data is being posted to the server, so a loading overlay can
    * be rendered over the form, preventing the user from losing input data when
@@ -262,6 +270,30 @@ function PaymentRequestForm(props: { email: string }) {
         </li>
       </ul>
 
+      {submission?._id && (
+        <p>
+          <button
+            className="usa-button font-sans-2xs margin-right-0 padding-x-105 padding-y-1"
+            type="button"
+            disabled={pdfQuery.isFetching}
+            onClick={(_ev) => pdfQuery.refetch()}
+          >
+            <span className="display-flex flex-align-center">
+              <svg
+                className="usa-icon"
+                aria-hidden="true"
+                focusable="false"
+                role="img"
+              >
+                <use href={`${icons}#arrow_downward`} />
+              </svg>
+              <span className="margin-left-1">Download PDF</span>
+              {pdfQuery.isFetching && <LoadingButtonIcon position="end" />}
+            </span>
+          </button>
+        </p>
+      )}
+
       <Dialog as="div" open={dataIsPosting.current} onClose={(_value) => {}}>
         <div className={clsx("tw-fixed tw-inset-0 tw-bg-black/30")} />
         <div className={clsx("tw-fixed tw-inset-0 tw-z-20")}>