fix phone input validation error

cypress/pageObject/Users/UserCreation.ts

@@ -70,10 +70,7 @@ export class UserCreation {
       { label: "Username", message: "Required" },
       { label: "Password", message: "Required" },
       { label: "Confirm Password", message: "Required" },
-      {
-        label: "Phone Number",
-        message: "Invalid input",
-      },
+      { label: "Phone Number", message: "Required" },
       { label: "State", message: "Required" },
     ]);
     return this;

cypress/pageObject/facility/FacilityCreation.ts

@@ -92,10 +92,7 @@ export class FacilityCreation {
       { label: "Facility Name", message: "Name is required" },
       { label: "Facility Type", message: "Facility type is required" },
       { label: "Address", message: "Address is required" },
-      {
-        label: "Phone Number",
-        message: "Invalid input",
-      },
+      { label: "Phone Number", message: "Required" },
       { label: "Pincode", message: "Invalid Pincode" },
     ]);
   }

public/locale/en.json

@@ -1153,6 +1153,7 @@
   "invalid_password": "Password doesn't meet the requirements",
   "invalid_password_reset_link": "Invalid password reset link",
   "invalid_patient_data": "Invalid Patient Data",
+  "invalid_phone_number": "Invalid phone number",
   "invalid_pincode": "Invalid Pincode",
   "invalid_pincode_msg": "Please enter valid pincode",
   "invalid_reset": "Invalid Reset",

src/Utils/validators.ts

@@ -1,20 +1,7 @@
 import { t } from "i18next";
-import { isValidPhoneNumber } from "react-phone-number-input";
 import { z } from "zod";
 
 export default {
-  phoneNumber: {
-    optional: z
-      .string()
-      .optional()
-      .refine((val) => !val || isValidPhoneNumber(val), {
-        message: t("phone_number_validation_error"),
-      }),
-    required: z.string().refine((val) => isValidPhoneNumber(val), {
-      message: t("phone_number_validation_error"),
-    }),
-  },
-
   coordinates: {
     latitude: z
       .number()

src/components/Facility/FacilityForm.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { isValidPhoneNumber } from "react-phone-number-input";
 import { toast } from "sonner";
 import * as z from "zod";
 
@@ -66,7 +67,10 @@ export default function FacilityForm({
     pincode: z.string().refine(validatePincode, t("invalid_pincode")),
     geo_organization: z.string().min(1, t("field_required")),
     address: z.string().min(1, t("address_is_required")),
-    phone_number: validators.phoneNumber.required,
+    phone_number: z
+      .string()
+      .min(1, t("field_required"))
+      .refine(isValidPhoneNumber, { message: t("invalid_phone_number") }),
     latitude: validators.coordinates.latitude.optional(),
     longitude: validators.coordinates.longitude.optional(),
     is_public: z.boolean().default(false),

src/components/Patient/PatientRegistration.tsx

@@ -56,7 +56,6 @@ import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { dateQueryString } from "@/Utils/utils";
-import validators from "@/Utils/validators";
 import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 import { PatientModel } from "@/types/emr/patient";
 import { Organization } from "@/types/organization/organization";
@@ -87,9 +86,15 @@ export default function PatientRegistration(
       z
         .object({
           name: z.string().nonempty(t("name_is_required")),
-          phone_number: validators.phoneNumber.required,
+          phone_number: z
+            .string()
+            .min(1, t("field_required"))
+            .refine(isValidPhoneNumber, { message: t("invalid_phone_number") }),
           same_phone_number: z.boolean(),
-          emergency_phone_number: validators.phoneNumber.required,
+          emergency_phone_number: z
+            .string()
+            .min(1, t("field_required"))
+            .refine(isValidPhoneNumber, { message: t("invalid_phone_number") }),
           gender: z.enum(GENDERS, { required_error: t("gender_is_required") }),
           blood_group: z.enum(BLOOD_GROUPS, {
             required_error: t("blood_group_is_required"),

src/components/Resource/ResourceCreate.tsx

@@ -4,6 +4,7 @@ import { Link, navigate, useQueryParams } from "raviger";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { isValidPhoneNumber } from "react-phone-number-input";
 import { toast } from "sonner";
 import * as z from "zod";
 
@@ -46,7 +47,6 @@ import { RESOURCE_CATEGORY_CHOICES } from "@/common/constants";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
-import validators from "@/Utils/validators";
 import facilityApi from "@/types/facility/facilityApi";
 import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
@@ -76,7 +76,10 @@ export default function ResourceCreate(props: ResourceProps) {
     referring_facility_contact_name: z
       .string()
       .min(1, { message: t("field_required") }),
-    referring_facility_contact_number: validators.phoneNumber.required,
+    referring_facility_contact_number: z
+      .string()
+      .min(1, t("field_required"))
+      .refine(isValidPhoneNumber, { message: t("invalid_phone_number") }),
     priority: z.number().default(1),
   });
 

src/components/Users/UserForm.tsx

@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { isValidPhoneNumber } from "react-phone-number-input";
 import { toast } from "sonner";
 import * as z from "zod";
 
@@ -38,7 +39,6 @@ import { GENDERS } from "@/common/constants";
 
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
-import validators from "@/Utils/validators";
 import GovtOrganizationSelector from "@/pages/Organization/components/GovtOrganizationSelector";
 import { Organization } from "@/types/organization/organization";
 import organizationApi from "@/types/organization/organizationApi";
@@ -90,7 +90,10 @@ export default function UserForm({
       first_name: z.string().min(1, t("field_required")),
       last_name: z.string().min(1, t("field_required")),
       email: z.string().email(t("invalid_email_address")),
-      phone_number: validators.phoneNumber.required,
+      phone_number: z
+        .string()
+        .min(1, t("field_required"))
+        .refine(isValidPhoneNumber, { message: t("invalid_phone_number") }),
       gender: z.enum(GENDERS, { required_error: t("gender_is_required") }),
       /* TODO: Userbase doesn't currently support these, neither does BE
       but we will probably need these */
@@ -145,7 +148,7 @@ export default function UserForm({
         last_name: userData.last_name,
         email: userData.email,
         phone_number: userData.phone_number || "",
-        gender: userData.gender,
+        gender: userData.gender || undefined,
       };
       form.reset(formData);
     }