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

@@ -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",

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",

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

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'