diff --git a/src/pages/RequestCallPage.js b/src/pages/RequestCallPage.js index d8a0d887259f..eb6d5c52427b 100644 --- a/src/pages/RequestCallPage.js +++ b/src/pages/RequestCallPage.js @@ -45,21 +45,17 @@ const propTypes = { class RequestCallPage extends Component { constructor(props) { super(props); - - // The displayName defaults to the user's login if they haven't set a first and last name, - // which we can't use to prefill the input fields - const [firstName, lastName] = props.myPersonalDetails.displayName !== props.myPersonalDetails.login - ? props.myPersonalDetails.displayName.split(' ') - : []; + const {firstName, lastName} = this.getFirstAndLastName(props.myPersonalDetails); this.state = { - firstName: firstName ?? '', - lastName: lastName ?? '', + firstName, + lastName, phoneNumber: this.getPhoneNumber(props.user.loginList) ?? '', isLoading: false, }; this.onSubmit = this.onSubmit.bind(this); this.getPhoneNumber = this.getPhoneNumber.bind(this); + this.getFirstAndLastName = this.getFirstAndLastName.bind(this); } onSubmit() { @@ -96,6 +92,38 @@ class RequestCallPage extends Component { return secondaryLogin ? Str.removeSMSDomain(secondaryLogin.partnerUserID) : null; } + /** + * Gets the first and last name from the user's personal details. + * If the login is the same as the displayName, then they don't exist, + * so we return empty strings instead. + * @param {String} login + * @param {String} displayName + * + * @returns {Object} + */ + getFirstAndLastName({login, displayName}) { + let firstName; + let lastName; + + if (login === displayName) { + firstName = ''; + lastName = ''; + } else { + const firstSpaceIndex = displayName.indexOf(' '); + const lastSpaceIndex = displayName.lastIndexOf(' '); + + if (firstSpaceIndex === -1) { + firstName = displayName; + lastName = ''; + } else { + firstName = displayName.substring(0, firstSpaceIndex); + lastName = displayName.substring(lastSpaceIndex); + } + } + + return {firstName, lastName}; + } + render() { const isButtonDisabled = false; return (