Fix : Switch to using CreateFacilityForm

public/locale/en.json

@@ -1591,6 +1591,7 @@
   "select_investigation_groups": "Select Investigation Groups",
   "select_investigations": "Select Investigations",
   "select_local_body": "Select Local Body",
+  "select_location_from": "Select location from",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",

src/Utils/utils.ts

@@ -1,3 +1,4 @@
+import { useQuery } from "@tanstack/react-query";
 import { differenceInMinutes, format } from "date-fns";
 import html2canvas from "html2canvas";
 
@@ -6,10 +7,12 @@ import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
 
 import * as Notification from "@/Utils/Notifications";
 import dayjs from "@/Utils/dayjs";
+import query from "@/Utils/request/query";
 import { Time } from "@/Utils/types";
 import { DoseRange, Timing } from "@/types/emr/medicationRequest";
 import { Patient } from "@/types/emr/newPatient";
 import { PatientModel } from "@/types/emr/patient";
+import organizationApi from "@/types/organization/organizationApi";
 import { Code } from "@/types/questionnaire/code";
 import { Quantity } from "@/types/questionnaire/quantity";
 
@@ -189,9 +192,31 @@ export const getPincodeDetails = async (pincode: string, apiKey: string) => {
     `https://api.data.gov.in/resource/6176ee09-3d56-4a3b-8115-21841576b2f6?api-key=${apiKey}&format=json&filters[pincode]=${pincode}&limit=1`,
   );
   const data = await response.json();
+  if (!data.records || data.records.length === 0) {
+    Notification.Error({ msg: "Invalid pincode" });
+    return null;
+  }
   return data.records[0];
 };
 
+export function useFetchOrganizationByName(name: string, parentId?: string) {
+  return useQuery({
+    queryKey: ["organization", name, parentId],
+    queryFn: async () => {
+      const data = await query(organizationApi.list, {
+        queryParams: {
+          org_type: "govt",
+          parent: parentId || "",
+          name: name || "",
+        },
+      })({ signal: new AbortController().signal });
+
+      return data.results?.[0];
+    },
+    enabled: !!name,
+  });
+}
+
 export const includesIgnoreCase = (str1: string, str2: string) => {
   if (!str1 || !str2) return false;
   const lowerCaseStr1 = str1.toLowerCase();

src/components/Facility/FacilityCreate.tsx

@@ -1,3 +1,4 @@
+import careConfig from "@careConfig";
 import {
   Popover,
   PopoverButton,
@@ -58,8 +59,13 @@ import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import request from "@/Utils/request/request";
-import { parsePhoneNumber } from "@/Utils/utils";
+import {
+  getPincodeDetails,
+  parsePhoneNumber,
+  useFetchOrganizationByName,
+} from "@/Utils/utils";
 import OrganizationSelector from "@/pages/Organization/components/OrganizationSelector";
+import { Organization } from "@/types/organization/organization";
 
 interface FacilityProps {
   facilityId?: string;
@@ -68,6 +74,9 @@ export const FacilityCreate = (props: FacilityProps) => {
   const { t } = useTranslation();
   const { facilityId } = props;
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+  const [pincode, setPincode] = useState("");
+
   const { goBack } = useAppHistory();
 
   const facilityFormSchema = z.object({
@@ -146,7 +155,7 @@ export const FacilityCreate = (props: FacilityProps) => {
         name: facilityData.name,
         description: facilityData.description || "",
         features: facilityData.features || [],
-        pincode: facilityData.pincode,
+        pincode: facilityData.pincode?.toString() || "",
         geo_organization: facilityData.geo_organization,
         address: facilityData.address,
         phone_number: facilityData.phone_number,
@@ -212,9 +221,43 @@ export const FacilityCreate = (props: FacilityProps) => {
     }
   };
 
+  const { data: pincodeData, isError: isPincodeError } = useQuery({
+    queryKey: ["pincodeDetails", pincode],
+    queryFn: () => getPincodeDetails(pincode, careConfig.govDataApiKey),
+    enabled: validatePincode(pincode),
+  });
+
+  if (isPincodeError) {
+    Notification.Error({ msg: "Invalid pincode" });
+  }
+
+  const stateName = pincodeData?.statename;
+
+  const districtName = pincodeData?.districtname;
+
+  const { data: stateOrg } = useFetchOrganizationByName(stateName);
+  const { data: districtOrg } = useFetchOrganizationByName(
+    districtName,
+    stateOrg?.id,
+  );
+
+  useEffect(() => {
+    if (stateOrg && districtOrg) {
+      setSelectedLevels([stateOrg, districtOrg]);
+    } else {
+      setSelectedLevels([]);
+    }
+  }, [stateOrg, districtOrg]);
+
+  console.log("selectedLevels", selectedLevels);
+
+  const handlePincodeChange = (value: string) => {
+    setPincode(value);
+  };
+
   return (
     <Page
-      title={facilityId ? "Update Facility" : "Create Facility"}
+      title={facilityId ? t("update_facility") : t("create_facility")}
       crumbsReplacements={{
         [facilityId || "????"]: { name: form.watch("name") },
       }}
@@ -318,6 +361,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                           required
                           onChange={(value) => {
                             field.onChange(value.value);
+                            handlePincodeChange(value.value);
                           }}
                           error={form.formState.errors.pincode?.message}
                         />
@@ -329,7 +373,12 @@ export const FacilityCreate = (props: FacilityProps) => {
               <div className="col-span-2 grid grid-cols-2 gap-5">
                 <OrganizationSelector
                   required={true}
-                  onChange={(value) => form.setValue("geo_organization", value)}
+                  value={facilityData?.geo_organization}
+                  parentSelectedLevels={selectedLevels}
+                  onChange={(value) => {
+                    // Update geo_organization value in form
+                    form.setValue("geo_organization", value);
+                  }}
                 />
               </div>
 
@@ -411,7 +460,7 @@ export const FacilityCreate = (props: FacilityProps) => {
                         >
                           <CareIcon icon="l-map-marker" className="text-xl" />
                           <span className="tooltip-text tooltip-bottom">
-                            Select location from map
+                            {t("select_location_from")}
                           </span>
                         </Button>
                       </PopoverButton>

src/pages/Organization/components/OrganizationSelector.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -20,6 +20,7 @@ interface OrganizationSelectorProps {
   onChange: (value: string) => void;
   required?: boolean;
   authToken?: string;
+  parentSelectedLevels?: Organization[];
 }
 
 interface AutoCompleteOption {
@@ -28,10 +29,29 @@ interface AutoCompleteOption {
 }
 
 export default function OrganizationSelector(props: OrganizationSelectorProps) {
-  const { onChange, required } = props;
+  const { value, onChange, required, parentSelectedLevels } = props;
   const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
   const [searchQuery, setSearchQuery] = useDebouncedState("", 500);
 
+  useEffect(() => {
+    if (value && parentSelectedLevels?.length == 0) {
+      const parsedValue = typeof value === "string" ? JSON.parse(value) : value;
+      if (parsedValue) {
+        const levels: Organization[] = [];
+        let current = parsedValue;
+
+        while (current.parent) {
+          levels.unshift(current);
+          current = current.parent;
+        }
+
+        setSelectedLevels(levels);
+      }
+    } else if (parentSelectedLevels) {
+      setSelectedLevels(parentSelectedLevels);
+    }
+  }, [value, parentSelectedLevels]);
+
   const headers = props.authToken
     ? {
         headers: {
@@ -148,7 +168,7 @@ export default function OrganizationSelector(props: OrganizationSelectorProps) {
             required={selectedLevels.length === 0 && required}
           >
             <Autocomplete
-              value=""
+              value={selectedLevels[selectedLevels.length - 1]?.id || ""}
               options={getOrganizationOptions(
                 selectedLevels.length === 0
                   ? getAllOrganizations?.results