Improve validation check for phone number in patient list page #8189

src/Components/Form/FieldValidators.tsx

@@ -79,12 +79,13 @@ export const EmailValidator = (message = "Invalid email address") => {
 //   return RegexValidator(SUPPORT_PHONE_NUMBER_REGEX, message);
 // };
 
+// References: https://trai.gov.in/sites/default/files/Recommendations_29052020.pdf
 const INDIAN_MOBILE_NUMBER_REGEX = /^(?=^\+91)(^\+91[6-9]\d{9}$)/;
 const INTERNATIONAL_MOBILE_NUMBER_REGEX = /^(?!^\+91)(^\+\d{1,3}\d{8,14}$)/;
 const MOBILE_NUMBER_REGEX = new RegExp(
   `(${INDIAN_MOBILE_NUMBER_REGEX.source})|(${INTERNATIONAL_MOBILE_NUMBER_REGEX.source})`,
 );
-const INDIAN_LANDLINE_NUMBER_REGEX = /^\+91[2-9]\d{7,9}$/;
+const INDIAN_LANDLINE_NUMBER_REGEX = /^\+91[2-9]\d{9}$/;
 const INDIAN_SUPPORT_NUMBER_REGEX = /^(1800|1860)\d{6,7}$/;
 
 const PHONE_NUMBER_REGEX_MAP = {

src/Components/Form/FormFields/PhoneNumberFormField.tsx

@@ -100,7 +100,7 @@ export default function PhoneNumberFormField(props: Props) {
     <FormField
       field={{
         ...field,
-        error: field.error || error,
+        error: field.error ?? error,
         labelSuffix: field.labelSuffix || (
           <PhoneNumberTypesHelp types={props.types} />
         ),

src/Components/Patient/ManagePatients.tsx

@@ -52,6 +52,7 @@ import {
 import { ICD11DiagnosisModel } from "../Diagnosis/types.js";
 import { getDiagnosesByIds } from "../Diagnosis/utils.js";
 import Tabs from "../Common/components/Tabs.js";
+import { PhoneNumberValidator } from "../Form/FieldValidators.js";
 import { isPatientMandatoryDataFilled } from "./Utils.js";
 import request from "../../Utils/request/request.js";
 import { Avatar } from "../Common/Avatar.js";
@@ -105,45 +106,29 @@ export const PatientManager = () => {
   const [diagnoses, setDiagnoses] = useState<ICD11DiagnosisModel[]>([]);
   const [showDialog, setShowDialog] = useState<"create" | "list-discharged">();
   const [showDoctors, setShowDoctors] = useState(false);
-  const [phone_number, setPhoneNumber] = useState("");
-  const [phoneNumberError, setPhoneNumberError] = useState("");
-  const [emergency_phone_number, setEmergencyPhoneNumber] = useState("");
-  const [emergencyPhoneNumberError, setEmergencyPhoneNumberError] =
-    useState("");
+  const [phoneNumber, _setPhoneNumber] = useState("");
+  const [emergencyPhoneNumber, _setEmergencyPhoneNumber] = useState("");
 
-  const setPhoneNum = (phone_number: string) => {
-    setPhoneNumber(phone_number);
-    if (phone_number.length >= 13) {
-      setPhoneNumberError("");
-      updateQuery({ phone_number });
-      return;
+  const setPhoneNumber = (value: string) => {
+    _setPhoneNumber(value);
+    const error = PhoneNumberValidator()(value);
+    if (!error) {
+      updateQuery({ phone_number: value });
     }
-
-    if (phone_number === "+91" || phone_number === "") {
-      setPhoneNumberError("");
-      qParams.phone_number && updateQuery({ phone_number: null });
-      return;
+    if ((value === "+91" || value === "") && qParams.phone_number) {
+      updateQuery({ phone_number: null });
     }
-
-    setPhoneNumberError("Enter a valid number");
   };
 
-  const setEmergencyPhoneNum = (emergency_phone_number: string) => {
-    setEmergencyPhoneNumber(emergency_phone_number);
-    if (emergency_phone_number.length >= 13) {
-      setEmergencyPhoneNumberError("");
-      updateQuery({ emergency_phone_number });
-      return;
+  const setEmergencyPhoneNumber = (value: string) => {
+    _setEmergencyPhoneNumber(value);
+    const error = PhoneNumberValidator()(value);
+    if (!error) {
+      updateQuery({ emergency_phone_number: value });
     }
-
-    if (emergency_phone_number === "+91" || emergency_phone_number === "") {
-      setEmergencyPhoneNumberError("");
-      qParams.emergency_phone_number &&
-        updateQuery({ emergency_phone_number: null });
-      return;
+    if ((value === "+91" || value === "") && qParams.emergency_phone_number) {
+      updateQuery({ emergency_phone_number: null });
     }
-
-    setEmergencyPhoneNumberError("Enter a valid number");
   };
 
   const tabValue =
@@ -333,10 +318,10 @@ export const PatientManager = () => {
     query: params,
     onResponse: () => {
       if (!params.phone_number) {
-        setPhoneNumber("+91");
+        _setPhoneNumber("+91");
       }
       if (!params.emergency_phone_number) {
-        setEmergencyPhoneNumber("+91");
+        _setEmergencyPhoneNumber("+91");
       }
     },
   });
@@ -1017,43 +1002,27 @@ export const PatientManager = () => {
               <PhoneNumberFormField
                 label="Search by Primary Number"
                 {...queryField("phone_number", "+91")}
-                value={phone_number}
-                onChange={(e) => setPhoneNum(e.value)}
-                error={phoneNumberError}
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.value)}
                 types={["mobile", "landline"]}
                 className="w-full grow"
+                error={((phoneNumber || "+91") === "+91" && "") || undefined}
               />
               <PhoneNumberFormField
                 label="Search by Emergency Number"
                 {...queryField("emergency_phone_number", "+91")}
-                value={emergency_phone_number}
-                onChange={(e) => setEmergencyPhoneNum(e.value)}
-                error={emergencyPhoneNumberError}
+                value={emergencyPhoneNumber}
+                onChange={(e) => setEmergencyPhoneNumber(e.value)}
                 types={["mobile", "landline"]}
                 className="w-full"
+                error={
+                  ((emergencyPhoneNumber || "+91") === "+91" && "") || undefined
+                }
               />
             </div>
           </div>
         </div>
       </div>
-      {/*!qParams.last_consultation__consent_types &&
-        (patientsWithNoConsents || 0) > 0 && (
-          <div className="flex w-full items-center gap-4 rounded-lg bg-red-500/10 p-4 text-sm text-red-500">
-            <CareIcon icon="l-info-circle" className="text-xl" />
-            <p className="font-semibold">
-              {patientsWithNoConsents} patients admitted missing consent
-              records&nbsp;
-              <button
-                onClick={() =>
-                  updateQuery({ last_consultation__consent_types: "None" })
-                }
-                className="underline"
-              >
-                Click to view
-              </button>
-            </p>
-          </div>
-        )*/}
       <div className="col-span-3 flex flex-wrap">
         <FilterBadges
           badges={({