Fix: Pincode autofill in Patient Registration page in public page

src/hooks/useOrganization.ts

@@ -11,14 +11,23 @@ interface UseOrganizationParams {
   parentId?: string;
   name?: string;
   enabled?: boolean;
+  authToken?: string;
 }
 
 export function useOrganization({
   orgType = "",
   parentId = "",
   name = "",
   enabled = true,
+  authToken,
 }: UseOrganizationParams) {
+  const headers = authToken
+    ? {
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      }
+    : {};
   const { data, isLoading, isError } = useQuery({
     queryKey: ["organization", orgType, name, parentId],
     queryFn: query(organizationApi.list, {
@@ -27,6 +36,7 @@ export function useOrganization({
         parent: parentId,
         name,
       },
+      ...headers,
     }),
     enabled: enabled && !!name,
   });

src/hooks/useStateAndDistrictFromPincode.ts

@@ -12,6 +12,7 @@ import { getPincodeDetails } from "@/Utils/utils";
 
 interface UseStateAndDistrictProps {
   pincode: string;
+  authToken?: string;
 }
 
 interface PincodeResponse {
@@ -21,6 +22,7 @@ interface PincodeResponse {
 
 export function useStateAndDistrictFromPincode({
   pincode,
+  authToken,
 }: UseStateAndDistrictProps) {
   const {
     data: pincodeDetails,
@@ -43,6 +45,7 @@ export function useStateAndDistrictFromPincode({
     orgType: "govt",
     parentId: "",
     name: stateName,
+    authToken,
     enabled: !!stateName,
   });
 
@@ -56,6 +59,7 @@ export function useStateAndDistrictFromPincode({
     orgType: "govt",
     parentId: stateOrg?.id,
     name: districtName,
+    authToken,
     enabled: !!stateOrg?.id && !!districtName,
   });
 

src/pages/PublicAppointments/PatientRegistration.tsx

@@ -1,12 +1,14 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { navigate, useNavigationPrompt } from "raviger";
-import { Fragment } from "react";
+import { Fragment, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { z } from "zod";
 
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
 import { Button } from "@/components/ui/button";
 import DateField from "@/components/ui/date-field";
 import {
@@ -23,6 +25,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Textarea } from "@/components/ui/textarea";
 
 import { usePatientContext } from "@/hooks/usePatientUser";
+import { useStateAndDistrictFromPincode } from "@/hooks/useStateAndDistrictFromPincode";
 
 import { GENDER_TYPES } from "@/common/constants";
 import { validateName, validatePincode } from "@/common/validation";
@@ -37,6 +40,7 @@ import {
   AppointmentPatient,
   AppointmentPatientRegister,
 } from "@/pages/Patient/Utils";
+import { Organization } from "@/types/organization/organization";
 import PublicAppointmentApi from "@/types/scheduling/PublicAppointmentApi";
 import {
   Appointment,
@@ -79,6 +83,9 @@ export function PatientRegistration(props: PatientRegistrationProps) {
   const patientUserContext = usePatientContext();
   const tokenData = patientUserContext?.tokenData;
 
+  const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);
+  const [selectedLevels, setSelectedLevels] = useState<Organization[]>([]);
+
   const patientSchema = z
     .object({
       name: z
@@ -219,7 +226,27 @@ export function PatientRegistration(props: PatientRegistrationProps) {
     t("unsaved_changes"),
   );
 
-  // const [showAutoFilledPincode, setShowAutoFilledPincode] = useState(false);
+  const { stateOrg, districtOrg } = useStateAndDistrictFromPincode({
+    pincode: form.watch("pincode")?.toString() || "",
+    authToken: tokenData.token,
+  });
+
+  useEffect(() => {
+    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]);
 
   return (
     <>
@@ -391,6 +418,22 @@ export function PatientRegistration(props: PatientRegistrationProps) {
                     <FormControl>
                       <Input {...field} />
                     </FormControl>
+                    {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>
+                    )}
                     <FormMessage />
                   </FormItem>
                 )}
@@ -403,11 +446,14 @@ export function PatientRegistration(props: PatientRegistrationProps) {
                   <FormItem className="flex flex-col">
                     <FormControl>
                       <GovtOrganizationSelector
+                        {...field}
+                        value={form.watch("geo_organization")}
+                        selected={selectedLevels}
                         required
                         authToken={tokenData.token}
-                        onChange={(value) => {
-                          field.onChange(value);
-                        }}
+                        onChange={(value) =>
+                          form.setValue("geo_organization", value)
+                        }
                       />
                     </FormControl>
                     <FormMessage />