diff --git a/package-lock.json b/package-lock.json index 7acbcfe9..50b7e060 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,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", @@ -3536,6 +3537,11 @@ "node": ">=6" } }, + "node_modules/libphonenumber-js": { + "version": "1.10.58", + "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.58.tgz", + "integrity": "sha512-53A0IpJFL9LdHbpeatwizf8KSwPICrqn9H0g3Y7WQ+Jgeu9cQ4Ew3WrRtrLBu/CX2lXd5+rgT01/tGlkbkzOjw==" + }, "node_modules/lines-and-columns": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", diff --git a/package.json b/package.json index 2bd6f8fc..aac713d0 100644 --- a/package.json +++ b/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", diff --git a/src/components/events/EventForm.jsx b/src/components/events/EventForm.jsx index 24bc7b65..e31a80ce 100644 --- a/src/components/events/EventForm.jsx +++ b/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!", }} diff --git a/src/components/profile/UserForm.jsx b/src/components/profile/UserForm.jsx index e5c81344..0523d2b1 100644 --- a/src/components/profile/UserForm.jsx +++ b/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 } }) => (