From 51197b78e3aa69d84c0de2a7d01754bf09f5fba1 Mon Sep 17 00:00:00 2001
From: abhimanyurajeesh <abhimanyurajeesh@gmail.com>
Date: Wed, 8 Jan 2025 18:47:30 +0530
Subject: [PATCH] Add error handling for questionnaire submission and update
 loading state messages

---
 public/locale/en.json                         |  1 +
 .../Questionnaire/QuestionnaireForm.tsx       | 31 ++++++++++---------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 94e9010f093..7236e25c9aa 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -1502,6 +1502,7 @@
   "questionnaire": "Questionnaire",
   "questionnaire_error_loading": "Error loading questionnaire",
   "questionnaire_not_exist": "The questionnaire you tried to access does not exist.",
+  "questionnaire_submission_failed": "Failed to submit questionnaire",
   "questionnaire_submitted_successfully": "Questionnaire submitted successfully",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",
diff --git a/src/components/Questionnaire/QuestionnaireForm.tsx b/src/components/Questionnaire/QuestionnaireForm.tsx
index 7a3f577fda5..fab86814679 100644
--- a/src/components/Questionnaire/QuestionnaireForm.tsx
+++ b/src/components/Questionnaire/QuestionnaireForm.tsx
@@ -14,6 +14,7 @@ import Loading from "@/components/Common/Loading";
 
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
+import { HTTPError } from "@/Utils/request/types";
 import useQuery from "@/Utils/request/useQuery";
 import {
   DetailedValidationError,
@@ -78,17 +79,18 @@ export function QuestionnaireForm({
     prefetch: !!questionnaireSlug && !FIXED_QUESTIONNAIRES[questionnaireSlug],
   });
 
-  const { mutate: submitBatch, isPending: isProcessing } = useMutation({
-    mutationFn: mutate(routes.batchRequest),
+  const { mutate: submitBatch, isPending } = useMutation({
+    mutationFn: mutate(routes.batchRequest, { silent: true }),
     onSuccess: () => {
       toast.success(t("questionnaire_submitted_successfully"));
       onSubmit?.();
     },
-    onError: (error: any) => {
-      if (error.results) {
-        handleSubmissionError(error.results as ValidationErrorResponse[]);
+    onError: (error: HTTPError) => {
+      const errorData = error.cause;
+      if (errorData?.results) {
+        handleSubmissionError(errorData.results as ValidationErrorResponse[]);
       }
-      toast.error(t("questionnaire_error_loading"));
+      toast.error(t("questionnaire_submission_failed"));
     },
   });
 
@@ -243,7 +245,6 @@ export function QuestionnaireForm({
       }
     });
 
-    // Execute the mutation
     submitBatch({ requests });
   };
 
@@ -260,7 +261,7 @@ export function QuestionnaireForm({
                   "bg-gray-100 text-green-600",
               )}
               onClick={() => setActiveQuestionnaireId(form.questionnaire.id)}
-              disabled={isProcessing}
+              disabled={isPending}
             >
               {form.questionnaire.title}
             </button>
@@ -279,7 +280,7 @@ export function QuestionnaireForm({
                       setActiveQuestionnaireId(form.questionnaire.id);
                       setActiveGroupId(group.id);
                     }}
-                    disabled={isProcessing}
+                    disabled={isPending}
                   >
                     {group.text}
                   </button>
@@ -321,7 +322,7 @@ export function QuestionnaireForm({
                       ),
                     );
                   }}
-                  disabled={isProcessing}
+                  disabled={isPending}
                 >
                   <CareIcon icon="l-times-circle" />
                   <span>Remove</span>
@@ -343,7 +344,7 @@ export function QuestionnaireForm({
                   ),
                 );
               }}
-              disabled={isProcessing}
+              disabled={isPending}
               activeGroupId={activeGroupId}
               errors={form.errors}
               patientId={patientId}
@@ -388,7 +389,7 @@ export function QuestionnaireForm({
                 },
               ]);
             }}
-            disabled={isProcessing}
+            disabled={isPending}
           />
         </div>
 
@@ -399,17 +400,17 @@ export function QuestionnaireForm({
               type="button"
               variant="outline"
               onClick={onCancel}
-              disabled={isProcessing}
+              disabled={isPending}
             >
               {t("cancel")}
             </Button>
             <Button
               type="button"
               onClick={handleSubmit}
-              disabled={isProcessing || hasErrors}
+              disabled={isPending || hasErrors}
               className="relative"
             >
-              {isProcessing ? (
+              {isPending ? (
                 <>
                   <span className="opacity-0">{t("submit")}</span>
                   <div className="absolute inset-0 flex items-center justify-center">