Switch to libphonenumber-js in favour of custom phone number validators

package.json

@@ -101,6 +101,7 @@
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
     "input-otp": "^1.4.2",
+    "libphonenumber-js": "^1.11.17",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.471.1",
     "markdown-it": "^14.1.0",

public/locale/en.json

@@ -1586,6 +1586,7 @@
   "phone_number_min_error": "Phone number must be at least 10 characters long",
   "phone_number_must_be_10_digits": "Phone number must be a 10-digit mobile number",
   "phone_number_not_found": "Phone number not found",
+  "phone_number_placeholder": "+91xxxxxxxxxx",
   "phone_number_validation": "Phone number must start with +91 followed by 10 digits",
   "phone_number_verified": "Phone Number Verified",
   "pincode": "Pincode",

src/Utils/utils.ts

@@ -2,9 +2,6 @@ import { differenceInMinutes, format } from "date-fns";
 import { toPng } from "html-to-image";
 import { toast } from "sonner";
 
-import { AREACODES, IN_LANDLINE_AREA_CODES } from "@/common/constants";
-import phoneCodesJson from "@/common/static/countryPhoneAndFlags.json";
-
 import dayjs from "@/Utils/dayjs";
 import { Time } from "@/Utils/types";
 import { Patient } from "@/types/emr/newPatient";
@@ -126,141 +123,6 @@ export const isUserOnline = (user: { last_login: DateLike }) => {
     : false;
 };
 
-export interface CountryData {
-  flag: string;
-  name: string;
-  code: string;
-}
-
-export const parsePhoneNumber = (phoneNumber: string, countryCode?: string) => {
-  if (!phoneNumber) return "";
-  if (phoneNumber === "+91") return "";
-  const phoneCodes: Record<string, CountryData> = phoneCodesJson;
-  let parsedNumber = phoneNumber.replace(/[-+() ]/g, "");
-  if (parsedNumber.length < 12) return "";
-  if (countryCode && phoneCodes[countryCode]) {
-    parsedNumber = phoneCodes[countryCode].code + parsedNumber;
-  } else if (!phoneNumber.startsWith("+")) {
-    return undefined;
-  }
-  parsedNumber = "+" + parsedNumber;
-  return parsedNumber;
-};
-
-export const formatPhoneNumber = (phoneNumber: string) => {
-  if (phoneNumber.startsWith("+91")) {
-    phoneNumber = phoneNumber.startsWith("+910")
-      ? phoneNumber.slice(4)
-      : phoneNumber.slice(3);
-    const landline_code = IN_LANDLINE_AREA_CODES.find((code) =>
-      phoneNumber.startsWith(code),
-    );
-    if (landline_code === undefined)
-      return "+91" + " " + phoneNumber.slice(0, 5) + " " + phoneNumber.slice(5);
-    const subscriber_no_length = 10 - landline_code.length;
-    return (
-      "+91" +
-      " " +
-      landline_code +
-      " " +
-      phoneNumber.slice(
-        landline_code.length,
-        subscriber_no_length / 2 + landline_code.length,
-      ) +
-      " " +
-      phoneNumber.slice(subscriber_no_length / 2 + landline_code.length)
-    );
-  } else if (phoneNumber.startsWith("1800")) {
-    return "1800" + " " + phoneNumber.slice(4, 7) + " " + phoneNumber.slice(7);
-  } else if (phoneNumber.startsWith("+")) {
-    const countryCode = getCountryCode(phoneNumber);
-    if (!countryCode) return phoneNumber;
-    const phoneCodes: Record<string, CountryData> = phoneCodesJson;
-    return (
-      "+" +
-      phoneCodes[countryCode].code +
-      " " +
-      phoneNumber.slice(phoneCodes[countryCode].code.length + 1)
-    );
-  }
-  return phoneNumber;
-};
-
-export const getCountryCode = (phoneNumber: string) => {
-  if (phoneNumber.startsWith("+")) {
-    const phoneCodes: Record<string, CountryData> = phoneCodesJson;
-    const phoneCodesArr = Object.keys(phoneCodes);
-    phoneNumber = phoneNumber.slice(1);
-    const allMatchedCountries: { name: string; code: string }[] = [];
-    for (let i = 0; i < phoneCodesArr.length; i++) {
-      if (
-        phoneNumber.startsWith(
-          phoneCodes[phoneCodesArr[i]].code.replaceAll("-", ""),
-        )
-      ) {
-        allMatchedCountries.push({
-          name: phoneCodesArr[i],
-          code: phoneCodes[phoneCodesArr[i]].code.replaceAll("-", ""),
-        });
-      }
-    }
-    // returns the country which is longest in case there are multiple matches
-    if (allMatchedCountries.length === 0) return undefined;
-    const matchedCountry = allMatchedCountries.reduce((max, country) =>
-      max.code > country.code ? max : country,
-    );
-    const sameCodeCountries = allMatchedCountries.filter(
-      (country) => country.code === matchedCountry.code,
-    );
-    if (matchedCountry === undefined) return undefined;
-    // some countries share same country code but differ in area codes
-    // The area codes are checked for such countries
-    if (matchedCountry.code == "1") {
-      const areaCode = phoneNumber.substring(1, 4);
-      return (
-        sameCodeCountries.find((country) =>
-          AREACODES[country.name]?.includes(areaCode),
-        )?.name ?? "US"
-      );
-    } else if (matchedCountry.code === "262") {
-      const areaCode = phoneNumber.substring(3, 6);
-      return sameCodeCountries.find((country) =>
-        AREACODES[country.name]?.includes(areaCode),
-      )?.name;
-    } else if (matchedCountry.code === "61") {
-      const areaCode = phoneNumber.substring(2, 7);
-      return (
-        sameCodeCountries.find((country) =>
-          AREACODES[country.name]?.includes(areaCode),
-        )?.name ?? "AU"
-      );
-    } else if (matchedCountry.code === "599") {
-      const areaCode = phoneNumber.substring(3, 4);
-      return (
-        sameCodeCountries.find((country) =>
-          AREACODES[country.name]?.includes(areaCode),
-        )?.name ?? "CW"
-      );
-    } else if (matchedCountry.code == "7") {
-      const areaCode = phoneNumber.substring(1, 2);
-      return (
-        sameCodeCountries.find((country) =>
-          AREACODES[country.name]?.includes(areaCode),
-        )?.name ?? "RU"
-      );
-    } else if (matchedCountry.code == "47") {
-      const areaCode = phoneNumber.substring(2, 4);
-      return (
-        sameCodeCountries.find((country) =>
-          AREACODES[country.name]?.includes(areaCode),
-        )?.name ?? "NO"
-      );
-    }
-    return matchedCountry.name;
-  }
-  return undefined;
-};
-
 const getRelativeDateSuffix = (abbreviated: boolean) => {
   return {
     day: abbreviated ? "d" : "days",

src/common/constants.tsx

@@ -376,129 +376,6 @@ export const FACILITY_FEATURE_TYPES: {
   },
 ];
 
-export const AREACODES: Record<string, string[]> = {
-  CA: [
-    "403",
-    "587",
-    "250",
-    "604",
-    "778",
-    "204",
-    "431",
-    "506",
-    "709",
-    "867",
-    "902",
-    "226",
-    "249",
-    "289",
-    "343",
-    "365",
-    "416",
-    "437",
-    "519",
-    "613",
-    "647",
-    "705",
-    "807",
-    "902",
-    "418",
-    "438",
-    "450",
-    "514",
-    "579",
-    "581",
-    "819",
-    "306",
-    "639",
-    "867",
-  ],
-  JM: ["658", "876"],
-  PR: ["787", "939"],
-  DO: ["809", "829"],
-  RE: ["262", "263", "692", "693"],
-  YT: ["269", "639"],
-  CC: ["89162"],
-  CX: ["89164"],
-  BQ: ["9"],
-  KZ: ["6", "7"],
-  SJ: ["79"],
-};
-
-export const IN_LANDLINE_AREA_CODES = [
-  "11",
-  "22",
-  "33",
-  "44",
-  "20",
-  "40",
-  "79",
-  "80",
-  "120",
-  "124",
-  "129",
-  "135",
-  "141",
-  "160",
-  "161",
-  "172",
-  "175",
-  "181",
-  "183",
-  "233",
-  "240",
-  "241",
-  "250",
-  "251",
-  "253",
-  "257",
-  "260",
-  "261",
-  "265",
-  "343",
-  "413",
-  "422",
-  "431",
-  "435",
-  "452",
-  "462",
-  "471",
-  "474",
-  "477",
-  "478",
-  "481",
-  "484",
-  "485",
-  "487",
-  "490",
-  "497",
-  "512",
-  "522",
-  "532",
-  "542",
-  "551",
-  "562",
-  "581",
-  "591",
-  "621",
-  "612",
-  "641",
-  "657",
-  "712",
-  "721",
-  "724",
-  "751",
-  "761",
-  "821",
-  "824",
-  "831",
-  "836",
-  "866",
-  "870",
-  "891",
-  "4822",
-];
-
 export const SOCIOECONOMIC_STATUS_CHOICES = [
   "MIDDLE_CLASS",
   "POOR",