From 683415778ecbfa8e164d5e87a7c9f0e9d18fbcb5 Mon Sep 17 00:00:00 2001
From: Jacob John Jeevan <40040905+Jacobjeevan@users.noreply.github.com>
Date: Tue, 28 Jan 2025 10:33:40 +0530
Subject: [PATCH] Confirm Alert for Patient Registration (#10205)

---
 src/components/Patient/PatientIndex.tsx       |  9 ++--
 .../Patient/PatientRegistration.tsx           | 44 +++++++++++++------
 .../PatientRegistration.tsx                   | 11 ++++-
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/components/Patient/PatientIndex.tsx b/src/components/Patient/PatientIndex.tsx
index 1256dccb36e..d6138c4a2ae 100644
--- a/src/components/Patient/PatientIndex.tsx
+++ b/src/components/Patient/PatientIndex.tsx
@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { navigate } from "raviger";
+import { navigate, useQueryParams } from "raviger";
 import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
@@ -39,7 +39,8 @@ import { parsePhoneNumber } from "@/Utils/utils";
 import { PartialPatientModel } from "@/types/emr/newPatient";
 
 export default function PatientIndex({ facilityId }: { facilityId: string }) {
-  const [phoneNumber, setPhoneNumber] = useState("");
+  const [{ phone_number: phoneNumber = "" }, setPhoneNumberQuery] =
+    useQueryParams();
   const [yearOfBirth, setYearOfBirth] = useState("");
   const [selectedPatient, setSelectedPatient] =
     useState<PartialPatientModel | null>(null);
@@ -91,7 +92,9 @@ export default function PatientIndex({ facilityId }: { facilityId: string }) {
 
   const handleSearch = useCallback((key: string, value: string) => {
     if (key === "phone_number") {
-      setPhoneNumber(value.length >= 13 || value === "" ? value : "");
+      setPhoneNumberQuery({
+        phone_number: value.length >= 13 || value === "" ? value : "",
+      });
     }
   }, []);
 
diff --git a/src/components/Patient/PatientRegistration.tsx b/src/components/Patient/PatientRegistration.tsx
index d65aefdc389..eb67967e099 100644
--- a/src/components/Patient/PatientRegistration.tsx
+++ b/src/components/Patient/PatientRegistration.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { navigate, useQueryParams } from "raviger";
+import { navigate, useNavigationPrompt, useQueryParams } from "raviger";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -297,6 +297,22 @@ export default function PatientRegistration(
     }
   }, [patientQuery.data]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const showDuplicate =
+    !patientPhoneSearch.isLoading &&
+    !!duplicatePatients?.length &&
+    !!parsePhoneNumber(form.watch("phone_number") || "") &&
+    !suppressDuplicateWarning;
+
+  // 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(
+    form.formState.isDirty &&
+      !isCreatingPatient &&
+      !isUpdatingPatient &&
+      !showDuplicate,
+    t("unsaved_changes"),
+  );
+
   if (patientId && patientQuery.isLoading) {
     return <Loading />;
   }
@@ -672,7 +688,7 @@ export default function PatientRegistration(
                 )}
               />
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 gap-4">
                 <FormField
                   control={form.control}
                   name="nationality"
@@ -696,6 +712,9 @@ export default function PatientRegistration(
                     </FormItem>
                   )}
                 />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
                 {form.watch("nationality") === "India" && (
                   <FormField
                     control={form.control}
@@ -740,18 +759,15 @@ export default function PatientRegistration(
           </form>
         </Form>
       </div>
-      {!patientPhoneSearch.isLoading &&
-        !!duplicatePatients?.length &&
-        !!parsePhoneNumber(form.watch("phone_number") || "") &&
-        !suppressDuplicateWarning && (
-          <DuplicatePatientDialog
-            patientList={duplicatePatients}
-            handleOk={handleDialogClose}
-            handleCancel={() => {
-              handleDialogClose("close");
-            }}
-          />
-        )}
+      {showDuplicate && (
+        <DuplicatePatientDialog
+          patientList={duplicatePatients}
+          handleOk={handleDialogClose}
+          handleCancel={() => {
+            handleDialogClose("close");
+          }}
+        />
+      )}
     </Page>
   );
 }
diff --git a/src/pages/PublicAppointments/PatientRegistration.tsx b/src/pages/PublicAppointments/PatientRegistration.tsx
index fc3888defa5..608df6c64c1 100644
--- a/src/pages/PublicAppointments/PatientRegistration.tsx
+++ b/src/pages/PublicAppointments/PatientRegistration.tsx
@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { navigate } from "raviger";
+import { navigate, useNavigationPrompt } from "raviger";
 import { Fragment } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -165,7 +165,7 @@ export function PatientRegistration(props: PatientRegistrationProps) {
     },
   });
 
-  const { mutate: createPatient } = useMutation({
+  const { mutate: createPatient, isPending: isCreatingPatient } = useMutation({
     mutationFn: (body: Partial<AppointmentPatientRegister>) =>
       mutate(routes.otp.createPatient, {
         body: { ...body, phone_number: tokenData.phoneNumber },
@@ -211,6 +211,13 @@ export function PatientRegistration(props: PatientRegistrationProps) {
     createPatient(formattedData);
   });
 
+  // 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(
+    form.formState.isDirty && !isCreatingPatient,
+    t("unsaved_changes"),
+  );
+
   // const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);
 
   return (