Enhance Patient Search: User-Friendly Error Message and Accessibility Improvements

public/locale/en.json

@@ -685,6 +685,7 @@
   "create_new_abha_address": "Create New ABHA Address",
   "create_new_abha_profile": "Don't have an ABHA Number",
   "create_new_asset": "Create New Asset",
+  "create_new_encounter": "Create a new encounter to get started",
   "create_new_tag": "Create New Tag",
   "create_position_preset": "Create a new position preset",
   "create_position_preset_description": "Creates a new position preset in Care from the current position of the camera for the given name",
@@ -1071,6 +1072,7 @@
   "get_auth_methods": "Get Available Authentication Methods",
   "get_auth_mode_error": "Could not find any supported authentication methods, Please try again with a different authentication method",
   "get_tests": "Get Tests",
+  "go_back": "Go Back",
   "goal": "Our goal is to continuously improve the quality and accessibility of public healthcare services using digital tools.",
   "granted_on": "Granted On",
   "has_allergies": "Has Allergies",
@@ -1565,6 +1567,7 @@
   "please_confirm_password": "Please confirm your new password.",
   "please_enter_a_reason_for_the_shift": "Please enter a reason for the shift.",
   "please_enter_confirm_password": "Please confirm your new password",
+  "please_enter_correct_birth_year": "Please enter the correct birth year to verify the patient details.",
   "please_enter_current_password": "Please enter your current password.",
   "please_enter_new_password": "Please enter your new password.",
   "please_enter_username": "Please enter the username",
@@ -1929,6 +1932,7 @@
   "start_date": "Start Date",
   "start_datetime": "Start Date/Time",
   "start_dosage": "Start Dosage",
+  "start_new_clinical_encounter": "Start a new clinical encounter",
   "start_review": "Start Review",
   "start_time": "Start Time",
   "start_time_must_be_before_end_time": "Start time must be before end time",
@@ -2133,6 +2137,7 @@
   "ventilator_oxygen_modality": "Oxygen Modality",
   "ventilator_oxygen_modality_oxygen_rate": "Oxygen Flow Rate",
   "ventilator_spo2": "SpO₂",
+  "verification_failed": "Verification Failed",
   "verify": "Verify",
   "verify_and_link": "Verify and Link",
   "verify_otp": "Verify OTP",

src/pages/Patients/VerifyPatient.tsx

@@ -21,6 +21,8 @@ import { Avatar } from "@/components/Common/Avatar";
 import CreateEncounterForm from "@/components/Encounter/CreateEncounterForm";
 import { EncounterCard } from "@/components/Facility/EncounterCard";
 
+import useAppHistory from "@/hooks/useAppHistory";
+
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
@@ -32,8 +34,13 @@ export default function VerifyPatient(props: { facilityId: string }) {
   const { t } = useTranslation();
   const [qParams] = useQueryParams();
   const { phone_number, year_of_birth, partial_id } = qParams;
+  const { goBack } = useAppHistory();
 
-  const { mutate: verifyPatient, data: patientData } = useMutation({
+  const {
+    mutate: verifyPatient,
+    data: patientData,
+    isError,
+  } = useMutation({
     mutationFn: mutate(routes.patient.search_retrieve),
     onError: (error) => {
       const errorData = error.cause as { errors: { msg: string[] } };
@@ -219,7 +226,27 @@ export default function VerifyPatient(props: { facilityId: string }) {
             </CardContent>
           </Card>
         </div>
-      ) : null}
+      ) : (
+        isError && (
+          <div className="h-screen w-full flex items-center justify-center">
+            <div className="flex flex-col items-center justify-center text-center">
+              <h3 className="text-xl font-semibold mb-1">
+                {t("verification_failed")}
+              </h3>
+              <p className="text-sm text-muted-foreground mb-6">
+                {t("please_enter_correct_birth_year")}
+              </p>
+              <Button
+                variant={"primary_gradient"}
+                className="gap-3 group"
+                onClick={() => goBack()}
+              >
+                {t("go_back")}
+              </Button>
+            </div>
+          </div>
+        )
+      )}
     </div>
   );
 }