fix: add phone number input validation

new-lamassu-admin/src/pages/Customers/Customers.js

@@ -194,6 +194,7 @@ const Customers = () => {
       <CreateCustomerModal
         showModal={showCreationModal}
         handleClose={() => setShowCreationModal(false)}
+        locale={locale}
         onSubmit={createNewCustomer}
       />
     </>

new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.js

@@ -1,6 +1,7 @@
 import { makeStyles } from '@material-ui/core/styles'
 import { Field, Form, Formik } from 'formik'
-import { PhoneNumberUtil } from 'google-libphonenumber'
+import { PhoneNumberFormat, PhoneNumberUtil } from 'google-libphonenumber'
+import * as R from 'ramda'
 import React from 'react'
 import * as Yup from 'yup'
 
@@ -34,16 +35,36 @@ const styles = {
 
 const pnUtilInstance = PhoneNumberUtil.getInstance()
 
-const validationSchema = Yup.object().shape({
+const getValidationSchema = countryCodes =>
-  phoneNumber: Yup.string()
+  Yup.object().shape({
-    .required('A phone number is required')
+    phoneNumber: Yup.string()
-    .test('is-valid-number', 'That is not a valid phone number', value => {
+      .required('A phone number is required')
-      try {
+      .test('is-valid-number', 'That is not a valid phone number', value => {
-        const number = pnUtilInstance.parseAndKeepRawInput(value, 'US')
+        try {
-        return pnUtilInstance.isValidNumber(number)
+          const validMap = R.map(it => {
-      } catch (e) {}
+            const number = pnUtilInstance.parseAndKeepRawInput(value, it)
-    })
+            return pnUtilInstance.isValidNumber(number)
-})
+          }, countryCodes)
+
+          return R.any(it => it === true, validMap)
+        } catch (e) {}
+      })
+      .trim()
+  })
+
+const formatPhoneNumber = (countryCodes, numberStr) => {
+  const matchedCountry = R.find(it => {
+    const number = pnUtilInstance.parseAndKeepRawInput(numberStr, it)
+    return pnUtilInstance.isValidNumber(number)
+  }, countryCodes)
+
+  const matchedNumber = pnUtilInstance.parseAndKeepRawInput(
+    numberStr,
+    matchedCountry
+  )
+
+  return pnUtilInstance.format(matchedNumber, PhoneNumberFormat.E164)
+}
 
 const initialValues = {
   phoneNumber: ''
@@ -58,9 +79,14 @@ const getErrorMsg = (formikErrors, formikTouched) => {
   return null
 }
 
-const CreateCustomerModal = ({ showModal, handleClose, onSubmit }) => {
+const CreateCustomerModal = ({ showModal, handleClose, onSubmit, locale }) => {
   const classes = useStyles()
 
+  const possibleCountries = R.append(
+    locale?.country,
+    R.map(it => it.country, locale?.overrides ?? [])
+  )
+
   return (
     <Modal
       closeOnBackdropClick={true}
@@ -69,12 +95,17 @@ const CreateCustomerModal = ({ showModal, handleClose, onSubmit }) => {
       handleClose={handleClose}
       open={showModal}>
       <Formik
-        validationSchema={validationSchema}
+        validationSchema={getValidationSchema(possibleCountries)}
         initialValues={initialValues}
         validateOnChange={false}
         onSubmit={values => {
           onSubmit({
-            variables: { phoneNumber: values.phoneNumber }
+            variables: {
+              phoneNumber: formatPhoneNumber(
+                possibleCountries,
+                values.phoneNumber
+              )
+            }
           })
         }}>
         {({ errors, touched }) => (