Merge pull request #3777 from Expensify/jasper-requestCallPageMiddleN…

…ames

Update logic to account for middle names

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 (