Use phonenumber lib instead of regex for phone number validation for …

…better and flexible validation

package.json

@@ -31,6 +31,7 @@
     "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
     "jwt-decode": "^4.0.0",
+    "libphonenumber-js": "^1.10.58",
     "next": "^14.1.0",
     "next-mdx-remote": "^4.4.1",
     "nprogress": "^0.2.0",

src/components/events/EventForm.jsx

@@ -30,6 +30,10 @@ import {
   Select,
   MenuItem,
 } from "@mui/material";
+import {
+  isValidPhoneNumber,
+  parsePhoneNumberWithError,
+} from "libphonenumber-js";
 
 import FileUpload from "components/FileUpload";
 import EventBudget from "components/events/EventBudget";
@@ -1175,10 +1179,20 @@ function EventPOC({
             name="poc_phone"
             control={control}
             rules={{
-              pattern: {
-                value:
-                  /(\+\d{1,3}\s?)?((\(\d{3}\)\s?)|(\d{3})(\s|-?))(\d{3}(\s|-?))(\d{4})(\s?(([E|e]xt[:|.|]?)|x|X)(\s?\d+))?/g,
-                message: "Invalid phone number!",
+              validate: {
+                checkPhoneNumber: (value) => {
+                  if (!value || value === "") return true;
+                  try {
+                    const phoneNumber = parsePhoneNumberWithError(value, {
+                      defaultCountry: "IN",
+                    });
+                    return (
+                      isValidPhoneNumber(value, "IN") || "Invalid Phone Number!"
+                    );
+                  } catch (error) {
+                    return error.message;
+                  }
+                },
               },
               required: "POC Phone number is required!",
             }}

src/components/profile/UserForm.jsx

@@ -10,6 +10,10 @@ import { useToast } from "components/Toast";
 
 import { LoadingButton } from "@mui/lab";
 import { Button, Grid, TextField, Typography } from "@mui/material";
+import {
+  isValidPhoneNumber,
+  parsePhoneNumberWithError,
+} from "libphonenumber-js";
 
 import FileUpload from "components/FileUpload";
 import ConfirmDialog from "components/ConfirmDialog";
@@ -150,10 +154,20 @@ export default function UserForm({ defaultValues = {}, action = "log" }) {
                   name="phone"
                   control={control}
                   rules={{
-                    pattern: {
-                      value:
-                        /(\+\d{1,3}\s?)?((\(\d{3}\)\s?)|(\d{3})(\s|-?))(\d{3}(\s|-?))(\d{4})(\s?(([E|e]xt[:|.|]?)|x|X)(\s?\d+))?/g,
-                      message: "Invalid phone number!",
+                    validate: {
+                      checkPhoneNumber: (value) => {
+                        if (!value || value === "") return true;
+                        try {
+                          const phoneNumber = parsePhoneNumberWithError(value, {
+                            defaultCountry: "IN",
+                          });
+                          return (
+                            isValidPhoneNumber(value, "IN") || "Invalid Phone Number!"
+                          );
+                        } catch (error) {
+                          return error.message;
+                        }
+                      },
                     },
                   }}
                   render={({ field, fieldState: { error, invalid } }) => (