Adjusted phone formatting libraries. IO-483

client/package-lock.json

@@ -12505,6 +12505,11 @@
         "type-check": "~0.3.2"
       }
     },
+    "libphonenumber-js": {
+      "version": "1.9.9",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.9.tgz",
+      "integrity": "sha512-RhtAvacOkq4wc+RrswYE9MteJQy/1yd4lgLJTdL+HdYYRLZbERFv4ZRj/Nt+/gIB2xVSgW0MLNqb32hx042W+g=="
+    },
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
@@ -14023,11 +14028,6 @@
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
-    "phone": {
-      "version": "2.4.20",
-      "resolved": "https://registry.npmjs.org/phone/-/phone-2.4.20.tgz",
-      "integrity": "sha512-ioZyyHBLl+NeXQpYHfZuu8zg1LqLv3dhjgVECICn/rwAs6Ej+Mj1YSir0CElfT7Pgv2UDR4KUfSP52lUZtrp7w=="
-    },
     "picomatch": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",

client/package.json

@@ -26,10 +26,10 @@
     "jsoneditor": "^9.1.8",
     "jsoneditor-react": "^3.1.0",
     "jsreport-browser-client-dist": "^1.3.0",
+    "libphonenumber-js": "^1.9.9",
     "logrocket": "^1.0.13",
     "moment-business-days": "^1.2.0",
     "node-sass": "^4.14.1",
-    "phone": "^2.4.20",
     "prop-types": "^15.7.2",
     "query-string": "^6.13.8",
     "react": "^17.0.1",

client/src/components/form-items-formatted/phone-form-item.component.jsx

@@ -1,9 +1,10 @@
 import i18n from "i18next";
-import phone from "phone";
+import parsePhoneNumber from "libphonenumber-js";
 import React, { forwardRef } from "react";
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/high-res.css";
 import "./phone-form-item.styles.scss";
+
 function FormItemPhone(props, ref) {
   return (
     <PhoneInput
@@ -23,9 +24,9 @@ export const PhoneItemFormatterValidation = (getFieldValue, name) => ({
     if (!getFieldValue(name)) {
       return Promise.resolve();
     } else {
-      const p = phone(getFieldValue(name), "us");
-      const p2 = phone(getFieldValue(name), "ca");
-      if (p.length > 0 || p2.length > 0) {
+      const p = parsePhoneNumber(getFieldValue(name), "CA");
+
+      if (p) {
         return Promise.resolve();
       } else {
         return Promise.reject(i18n.t("general.validation.invalidphone"));

client/src/utils/PhoneFormatter.jsx

@@ -1,8 +1,8 @@
-import React from "react";
 //import NumberFormat from "react-number-format";
-import phone from "phone";
-export default function PhoneNumberFormatter(props) {
-  const p = phone(props.children);
+import parsePhoneNumber from "libphonenumber-js";
+import React from "react";
 
-  return <span>{p[0]}</span>;
+export default function PhoneNumberFormatter(props) {
+  const p = parsePhoneNumber(props.children, "CA");
+  return p ? <span>{p.formatInternational()}</span> : null;
 }