diff --git a/new-lamassu-admin/src/pages/Customers/Customers.js b/new-lamassu-admin/src/pages/Customers/Customers.js index 05c770c3..1875d44d 100644 --- a/new-lamassu-admin/src/pages/Customers/Customers.js +++ b/new-lamassu-admin/src/pages/Customers/Customers.js @@ -194,6 +194,7 @@ const Customers = () => { setShowCreationModal(false)} + locale={locale} onSubmit={createNewCustomer} /> diff --git a/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.js b/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.js index f36048a6..984d9d64 100644 --- a/new-lamassu-admin/src/pages/Customers/components/CreateCustomerModal.js +++ b/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({ - phoneNumber: Yup.string() - .required('A phone number is required') - .test('is-valid-number', 'That is not a valid phone number', value => { - try { - const number = pnUtilInstance.parseAndKeepRawInput(value, 'US') - return pnUtilInstance.isValidNumber(number) - } catch (e) {} - }) -}) +const getValidationSchema = countryCodes => + Yup.object().shape({ + phoneNumber: Yup.string() + .required('A phone number is required') + .test('is-valid-number', 'That is not a valid phone number', value => { + try { + const validMap = R.map(it => { + 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 ( { handleClose={handleClose} open={showModal}> { onSubmit({ - variables: { phoneNumber: values.phoneNumber } + variables: { + phoneNumber: formatPhoneNumber( + possibleCountries, + values.phoneNumber + ) + } }) }}> {({ errors, touched }) => (