From 8ee96ce5ce8fa951bd6ca9df3107ca18e23e4895 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <andreas@ellewsen.no>
Date: Thu, 27 Apr 2023 13:18:07 +0200
Subject: [PATCH] Format phone number correctly before submitting
Instead of manually putting together the phone number and hoping we get
it right, we instead format the number using the phonenumbers library.
This library is already in use for validation, making it the obvious
choice. This means that the backend will only receive E.164 formatted
phonenumbers from now on. In addition, we now ensure that the number is
in fact a mobile phone number.
---
frontend/package-lock.json | 14 +++++++-------
frontend/package.json | 2 +-
frontend/src/routes/guest/register/index.tsx | 6 +++---
frontend/src/utils/index.ts | 2 +-
4 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eb2ea544..c5066b34 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -33,7 +33,7 @@
"i18next": "^21.3.3",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-http-backend": "^1.3.1",
- "libphonenumber-js": "^1.9.35",
+ "libphonenumber-js": "^1.10.28",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
@@ -15086,9 +15086,9 @@
}
},
"node_modules/libphonenumber-js": {
- "version": "1.9.39",
- "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.39.tgz",
- "integrity": "sha512-TxYz/Ii7mjkocKGKmFHhsTAvvcxr4AY3yUlZzZ2z7HC4DPRrNlzJ9n32/SMogqsyFOXLMXQPCkCInNRbiVaEPA=="
+ "version": "1.10.28",
+ "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.28.tgz",
+ "integrity": "sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw=="
},
"node_modules/lines-and-columns": {
"version": "1.1.6",
@@ -35325,9 +35325,9 @@
}
},
"libphonenumber-js": {
- "version": "1.9.39",
- "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.9.39.tgz",
- "integrity": "sha512-TxYz/Ii7mjkocKGKmFHhsTAvvcxr4AY3yUlZzZ2z7HC4DPRrNlzJ9n32/SMogqsyFOXLMXQPCkCInNRbiVaEPA=="
+ "version": "1.10.28",
+ "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.10.28.tgz",
+ "integrity": "sha512-1eAgjLrZA0+2Wgw4hs+4Q/kEBycxQo8ZLYnmOvZ3AlM8ImAVAJgDPlZtISLEzD1vunc2q8s2Pn7XwB7I8U3Kzw=="
},
"lines-and-columns": {
"version": "1.1.6",
diff --git a/frontend/package.json b/frontend/package.json
index b541ee4b..045374b2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,7 @@
"i18next": "^21.3.3",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-http-backend": "^1.3.1",
- "libphonenumber-js": "^1.9.35",
+ "libphonenumber-js": "^1.10.28",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx
index b7a2d093..639c5e96 100644
--- a/frontend/src/routes/guest/register/index.tsx
+++ b/frontend/src/routes/guest/register/index.tsx
@@ -5,6 +5,7 @@ import {
CountryCode,
getCountries,
getCountryCallingCode,
+ parsePhoneNumber,
} from 'libphonenumber-js'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
@@ -236,9 +237,8 @@ export default function GuestRegister() {
const payload: any = {
person: {},
}
- payload.person.private_mobile = `+${getCountryCallingCode(
- registerData.mobilePhoneCountry as CountryCode
- )}${registerData.mobilePhone}`
+ const parsedPhone = parsePhoneNumber(registerData.mobilePhone, registerData.mobilePhoneCountry as CountryCode)
+ payload.person.private_mobile = parsedPhone.format('E.164')
if (initialGuestData !== null) {
// Only include the fields if they have actually changed. Could also send them back to the
diff --git a/frontend/src/utils/index.ts b/frontend/src/utils/index.ts
index 681f6757..77036843 100644
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -9,7 +9,7 @@ import {
Consent,
FetchedConsent,
} from 'interfaces'
-import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'
+import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js/mobile'
import parse from 'date-fns/parse'
import { parseInt } from 'lodash'
--
GitLab