Fix state & district autofill & multiple other small issues in Patient Registration page

public/locale/en.json

@@ -1452,6 +1452,7 @@
   "organization_forbidden": "You don't have access to any organizations yet.",
   "organization_not_found": "No Organizations Found",
   "organizations": "Organizations",
+  "organizations_fetch_error": "Error while fetching organizations",
   "origin_facility": "Current facility",
   "other_details": "Other details",
   "otp_verification_error": "Failed to verify OTP. Please try again later.",
@@ -1557,7 +1558,9 @@
   "phone_number_verified": "Phone Number Verified",
   "pincode": "Pincode",
   "pincode_autofill": "State and District auto-filled from Pincode",
+  "pincode_district_auto_fill_error": "Failed to auto-fill district information",
   "pincode_must_be_6_digits": "Pincode must be a 6-digit number",
+  "pincode_state_auto_fill_error": "Failed to auto-fill state and district information",
   "play": "Play",
   "play_audio": "Play Audio",
   "please_assign_bed_to_patient": "Please assign a bed to this patient",

src/components/Patient/PatientRegistration.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import CareIcon from "@/CAREUI/icons/CareIcon";
 import SectionNavigator from "@/CAREUI/misc/SectionNavigator";
 
 import { Button } from "@/components/ui/button";
@@ -37,6 +38,7 @@ import Page from "@/components/Common/Page";
 import DuplicatePatientDialog from "@/components/Facility/DuplicatePatientDialog";
 
 import useAppHistory from "@/hooks/useAppHistory";
+import { useStateAndDistrictFromPincode } from "@/hooks/useStateAndDistrictFromPincode";
 
 import {
   BLOOD_GROUP_CHOICES, // DOMESTIC_HEALTHCARE_SUPPORT_CHOICES,
@@ -79,7 +81,8 @@ export default function PatientRegistration(
 
   const [suppressDuplicateWarning, setSuppressDuplicateWarning] =
     useState(!!patientId);
-  const [debouncedNumber, setDebouncedNumber] = useState<string>();
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);
 
   const formSchema = useMemo(
     () =>
@@ -192,6 +195,28 @@ export default function PatientRegistration(
     },
   });
 
+  const { stateOrg, districtOrg } = useStateAndDistrictFromPincode({
+    pincode: form.watch("pincode")?.toString() || "",
+  });
+
+  useEffect(() => {
+    // Fill by pincode for patient registration
+    if (patientId) return;
+    const levels: Organization[] = [];
+    if (stateOrg) levels.push(stateOrg);
+    if (districtOrg) levels.push(districtOrg);
+    setSelectedLevels(levels);
+
+    if (levels.length == 2) {
+      setShowAutoFilledPincode(true);
+      const timer = setTimeout(() => {
+        setShowAutoFilledPincode(false);
+      }, 5000);
+      return () => clearTimeout(timer);
+    }
+    return () => setShowAutoFilledPincode(false);
+  }, [stateOrg, districtOrg, patientId]);
+
   function onSubmit(values: z.infer<typeof formSchema>) {
     if (patientId) {
       updatePatient({ ...values, ward_old: undefined });
@@ -226,13 +251,13 @@ export default function PatientRegistration(
   };
 
   const patientPhoneSearch = useQuery({
-    queryKey: ["patients", "phone-number", debouncedNumber],
-    queryFn: query(routes.searchPatient, {
+    queryKey: ["patients", "phone-number", form.watch("phone_number")],
+    queryFn: query.debounced(routes.searchPatient, {
       body: {
-        phone_number: parsePhoneNumber(debouncedNumber || "") || "",
+        phone_number: parsePhoneNumber(form.watch("phone_number") || "") || "",
       },
     }),
-    enabled: !!parsePhoneNumber(debouncedNumber || ""),
+    enabled: !!parsePhoneNumber(form.watch("phone_number") || ""),
   });
 
   const duplicatePatients = useMemo(() => {
@@ -249,6 +274,9 @@ export default function PatientRegistration(
 
   useEffect(() => {
     if (patientQuery.data) {
+      setSelectedLevels([
+        patientQuery.data.geo_organization as unknown as Organization,
+      ]);
       form.reset({
         ...patientQuery.data,
         same_phone_number:
@@ -257,27 +285,19 @@ export default function PatientRegistration(
         same_address:
           patientQuery.data.address === patientQuery.data.permanent_address,
         age_or_dob: patientQuery.data.date_of_birth ? "dob" : "age",
+        age: !patientQuery.data.date_of_birth
+          ? patientQuery.data.age
+          : undefined,
+        date_of_birth: patientQuery.data.date_of_birth
+          ? patientQuery.data.date_of_birth
+          : undefined,
         geo_organization: (
           patientQuery.data.geo_organization as unknown as Organization
         )?.id,
       } as unknown as z.infer<typeof formSchema>);
     }
   }, [patientQuery.data]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      const phoneNumber = form.getValues("phone_number");
-      if (!patientId || patientQuery.data?.phone_number !== phoneNumber) {
-        setSuppressDuplicateWarning(false);
-      }
-      setDebouncedNumber(phoneNumber);
-    }, 500);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [form.watch("phone_number")]); // eslint-disable-line react-hooks/exhaustive-deps
-
   if (patientId && patientQuery.isLoading) {
     return <Loading />;
   }
@@ -683,6 +703,22 @@ export default function PatientRegistration(
                       />
                     </FormControl>
                     <FormMessage />
+                    {showAutoFilledPincode && (
+                      <div
+                        role="status"
+                        aria-live="polite"
+                        className="flex items-center"
+                      >
+                        <CareIcon
+                          icon="l-check-circle"
+                          className="mr-2 text-sm text-green-500"
+                          aria-hidden="true"
+                        />
+                        <span className="text-sm text-primary-500">
+                          {t("pincode_autofill")}
+                        </span>
+                      </div>
+                    )}
                   </FormItem>
                 )}
               />
@@ -722,6 +758,7 @@ export default function PatientRegistration(
                           <OrganizationSelector
                             {...field}
                             required={true}
+                            selected={selectedLevels}
                             value={form.watch("geo_organization")}
                             onChange={(value) =>
                               form.setValue("geo_organization", value)
@@ -757,7 +794,7 @@ export default function PatientRegistration(
       </div>
       {!patientPhoneSearch.isLoading &&
         !!duplicatePatients?.length &&
-        !!parsePhoneNumber(debouncedNumber || "") &&
+        !!parsePhoneNumber(form.watch("phone_number") || "") &&
         !suppressDuplicateWarning && (
           <DuplicatePatientDialog
             patientList={duplicatePatients}

src/hooks/useOrganization.ts

@@ -0,0 +1,44 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import query from "@/Utils/request/query";
+import { Organization } from "@/types/organization/organization";
+import organizationApi from "@/types/organization/organizationApi";
+
+interface UseOrganizationParams {
+  orgType?: string;
+  parentId?: string;
+  name?: string;
+  enabled?: boolean;
+}
+
+export function useOrganization({
+  orgType = "",
+  parentId = "",
+  name = "",
+  enabled = true,
+}: UseOrganizationParams) {
+  const { data, isLoading, isError } = useQuery<{ results: Organization[] }>({
+    queryKey: ["organization", orgType, name, parentId],
+    queryFn: query(organizationApi.list, {
+      queryParams: {
+        org_type: orgType,
+        parent: parentId,
+        name,
+      },
+    }),
+    enabled: enabled && !!name,
+    select: (res) => ({ results: res.results }),
+  });
+
+  const { t } = useTranslation();
+
+  isError && toast.error(t("organizations_fetch_error"));
+
+  return {
+    organizations: data?.results || [],
+    isLoading,
+    isError,
+  };
+}

src/hooks/useStateAndDistrictFromPincode.ts

@@ -0,0 +1,72 @@
+import careConfig from "@careConfig";
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+
+import { validatePincode } from "@/common/validation";
+
+import { getPincodeDetails } from "@/Utils/utils";
+
+import { useOrganization } from "./useOrganization";
+
+interface UseStateAndDistrictProps {
+  pincode: string;
+}
+
+export function useStateAndDistrictFromPincode({
+  pincode,
+}: UseStateAndDistrictProps) {
+  const {
+    data: pincodeDetails,
+    isLoading: isPincodeLoading,
+    isError: isPincodeError,
+  } = useQuery({
+    queryKey: ["pincode-details", pincode],
+    queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
+    enabled: pincode !== "" && validatePincode(pincode),
+  });
+
+  const { t } = useTranslation();
+
+  const stateName = pincodeDetails?.statename || "";
+  const districtName = pincodeDetails?.districtname || "";
+
+  const {
+    organizations: stateOrgs,
+    isLoading: isStateLoading,
+    isError: isStateError,
+  } = useOrganization({
+    orgType: "govt",
+    parentId: "",
+    name: stateName,
+    enabled: !!stateName,
+  });
+
+  const stateOrg = stateOrgs?.[0];
+
+  const {
+    organizations: districtOrgs,
+    isLoading: isDistrictLoading,
+    isError: isDistrictError,
+  } = useOrganization({
+    orgType: "govt",
+    parentId: stateOrg?.id,
+    name: districtName,
+    enabled: !!stateOrg?.id && !!districtName,
+  });
+
+  isStateError && toast.info(t("pincode_state_auto_fill_error"));
+
+  isDistrictError &&
+    !isStateError &&
+    toast.info(t("pincode_district_auto_fill_error"));
+
+  const districtOrg = districtOrgs[0];
+
+  return {
+    stateOrg,
+    districtOrg,
+    isLoading: isPincodeLoading || isStateLoading || isDistrictLoading,
+    isError: isPincodeError || isStateError || isDistrictError,
+  };
+}

src/pages/Organization/components/OrganizationSelector.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { t } from "i18next";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -17,6 +17,8 @@ interface OrganizationSelectorProps {
   onChange: (value: string) => void;
   required?: boolean;
   authToken?: string;
+  selected?: Organization[];
+  errorMessage?: string;
 }
 
 interface AutoCompleteOption {
@@ -26,7 +28,7 @@ interface AutoCompleteOption {
 
 // TODO: Rename to GovtOrganizationSelector
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
-  const { onChange, required } = props;
+  const { onChange, required, selected } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
   const [searchQuery, setSearchQuery] = useState("");
 
@@ -38,6 +40,22 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
       }
     : {};
 
+  useEffect(() => {
+    if (selected && selected.length > 0) {
+      let currentOrg = selected[0];
+      if (currentOrg.level_cache === 0) {
+        setSelectedLevels(selected);
+      } else {
+        const levels: Organization[] = [];
+        while (currentOrg && currentOrg.level_cache >= 0) {
+          levels.unshift(currentOrg);
+          currentOrg = currentOrg.parent as unknown as Organization;
+        }
+        setSelectedLevels(levels);
+      }
+    }
+  }, [selected]);
+
   const { data: getAllOrganizations } = useQuery({
     queryKey: ["organizations-root", searchQuery],
     queryFn: query.debounced(organizationApi.list, {
@@ -101,7 +119,19 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
   };
 
   const handleEdit = (level: number) => {
-    setSelectedLevels((prev) => prev.slice(0, level));
+    const newLevels = selectedLevels.slice(0, level);
+    setSelectedLevels(newLevels);
+
+    if (!newLevels.length) {
+      onChange("");
+    } else {
+      const lastOrg = newLevels[newLevels.length - 1];
+      if (!lastOrg.has_children) {
+        onChange(lastOrg.id);
+      } else {
+        onChange("");
+      }
+    }
   };
 
   const lastLevel = selectedLevels[selectedLevels.length - 1];