Fe fix phone number validation (canada-ca#1847)

* Add regex validation of number

* Add better feedback, remove unused typeError message

* Update to Regex to match feedback from server

* Add translation

* Run lingui compile

* Fix i18n for phone number validation

Author: ThomasNickerson

frontend/src/EditableUserPhoneNumber.js

@@ -19,10 +19,11 @@ import {
 import WithPseudoBox from './withPseudoBox'
 import { Formik } from 'formik'
 import { t, Trans } from '@lingui/macro'
+import { i18n } from '@lingui/core'
 import { UPDATE_USER_PROFILE } from './graphql/mutations'
 import { useMutation } from '@apollo/client'
 import { useUserState } from './UserState'
-import { number, object } from 'yup'
+import { object, string as yupString } from 'yup'
 import { fieldRequirements } from './fieldRequirements'
 import { TrackerButton } from './TrackerButton'
 import PhoneNumberField from './PhoneNumberField'
@@ -91,10 +92,15 @@ function EditableUserPhoneNumber({ detailValue }) {
     },
   )
 
+  const PHONE_NUMBER_REGEX = /^\+[1-9]\d{10,15}$/
+
   const validationSchema = object().shape({
-    phoneNumber: number()
-      .required(fieldRequirements.phoneNumber.required.message)
-      .typeError(fieldRequirements.phoneNumber.typeError.message),
+    phoneNumber: yupString()
+      .required(i18n._(fieldRequirements.phoneNumber.required.message))
+      .matches(
+        PHONE_NUMBER_REGEX,
+        i18n._(fieldRequirements.phoneNumber.matches.message),
+      ),
   })
 
   return (

frontend/src/fieldRequirements.js

@@ -30,7 +30,9 @@ export const fieldRequirements = {
     required: { message: t`Domain url field must not be empty` },
   },
   phoneNumber: {
-    typeError: { message: t`Phone number must only contains numbers` },
+    matches: {
+      message: t`Phone number must be a valid phone number of the form +17895551234 (10-15 digits)`,
+    },
     required: { message: t`Phone number field must not be empty` },
   },
 }