diff --git a/client/package-lock.json b/client/package-lock.json index 9ef287e56..377c05de8 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index ece4b8ac6..eada702e2 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/components/form-items-formatted/phone-form-item.component.jsx b/client/src/components/form-items-formatted/phone-form-item.component.jsx index 431293b19..b834be0b5 100644 --- a/client/src/components/form-items-formatted/phone-form-item.component.jsx +++ b/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 ( ({ 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")); diff --git a/client/src/utils/PhoneFormatter.jsx b/client/src/utils/PhoneFormatter.jsx index e021626b6..6128760c8 100644 --- a/client/src/utils/PhoneFormatter.jsx +++ b/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 {p[0]}; +export default function PhoneNumberFormatter(props) { + const p = parsePhoneNumber(props.children, "CA"); + return p ? {p.formatInternational()} : null; }