Confirm Dialog For Navigation on Edited Questionnaire Form

public/locale/en.json

@@ -2044,6 +2044,7 @@
   "unlink_skill_error": "Error while unlinking skill. Try again later.",
   "unlink_skill_success": "Skill unlinked successfully",
   "unlink_this_facility": "Unlink Facility",
+  "unsaved_changes": "You have unsaved changes. Are you sure you want to leave?",
   "unsubscribe": "Unsubscribe",
   "unsubscribe_failed": "Unsubscribe failed.",
   "unsubscribed_successfully": "Unsubscribed Successfully.",

src/components/Questionnaire/QuestionnaireForm.tsx

@@ -1,5 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { t } from "i18next";
+import { useNavigationPrompt } from "raviger";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 
@@ -63,6 +64,7 @@ export function QuestionnaireForm({
   onCancel,
   facilityId,
 }: QuestionnaireFormProps) {
+  const [isDirty, setIsDirty] = useState(false);
   const [questionnaireForms, setQuestionnaireForms] = useState<
     QuestionnaireFormState[]
   >([]);
@@ -83,6 +85,7 @@ export function QuestionnaireForm({
     mutationFn: mutate(routes.batchRequest, { silent: true }),
     onSuccess: () => {
       toast.success(t("questionnaire_submitted_successfully"));
+      setIsDirty(false);
       onSubmit?.();
     },
     onError: (error) => {
@@ -94,6 +97,10 @@ export function QuestionnaireForm({
     },
   });
 
+  // TODO: Use useBlocker hook after switching to tanstack router
+  // https://tanstack.com/router/latest/docs/framework/react/guide/navigation-blocking#how-do-i-use-navigation-blocking
+  useNavigationPrompt(isDirty, t("questionnaire_unsaved_changes"));
+
   useEffect(() => {
     if (!isInitialized && questionnaireSlug) {
       const questionnaire =
@@ -348,6 +355,9 @@ export function QuestionnaireForm({
                       : formItem,
                   ),
                 );
+                if (!isDirty) {
+                  setIsDirty(true);
+                }
               }}
               disabled={isPending}
               activeGroupId={activeGroupId}