feat: split full name into first name and last name (#1131)

src/register/RegistrationFields/NameField/NameField.jsx

@@ -27,21 +27,23 @@ const NameField = (props) => {
   const {
     handleErrorChange,
     shouldFetchUsernameSuggestions,
+    name,
+    fullName,
   } = props;
 
   const handleOnBlur = (e) => {
     const { value } = e.target;
-    const fieldError = validateName(value, formatMessage);
+    const fieldError = validateName(value, name, formatMessage);
     if (fieldError) {
-      handleErrorChange('name', fieldError);
+      handleErrorChange(name, fieldError);
     } else if (shouldFetchUsernameSuggestions && !validationApiRateLimited) {
-      dispatch(fetchRealtimeValidations({ name: value }));
+      dispatch(fetchRealtimeValidations({ name: fullName.trim() }));
     }
   };
 
   const handleOnFocus = () => {
-    handleErrorChange('name', '');
-    dispatch(clearRegistrationBackendError('name'));
+    handleErrorChange(name, '');
+    dispatch(clearRegistrationBackendError(name));
   };
 
   return (
@@ -56,6 +58,7 @@ const NameField = (props) => {
 NameField.defaultProps = {
   errorMessage: '',
   shouldFetchUsernameSuggestions: false,
+  fullName: '',
 };
 
 NameField.propTypes = {
@@ -64,6 +67,8 @@ NameField.propTypes = {
   value: PropTypes.string.isRequired,
   handleChange: PropTypes.func.isRequired,
   handleErrorChange: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  fullName: PropTypes.string,
 };
 
 export default NameField;

src/register/RegistrationFields/NameField/NameField.test.jsx

@@ -51,7 +51,7 @@ describe('NameField', () => {
   beforeEach(() => {
     store = mockStore(initialState);
     props = {
-      name: 'name',
+      name: '',
       value: '',
       errorMessage: '',
       handleChange: jest.fn(),
@@ -66,43 +66,44 @@ describe('NameField', () => {
   });
 
   describe('Test Name Field', () => {
-    const fieldValidation = { name: 'Enter your full name' };
-
-    it('should run name field validation when onBlur is fired', () => {
+    it('should run first name field validation when onBlur is fired', () => {
+      props.name = 'firstname';
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      const nameInput = container.querySelector('input#name');
-      fireEvent.blur(nameInput, { target: { value: '', name: 'name' } });
+      const firstNameInput = container.querySelector('input#firstname');
+      fireEvent.blur(firstNameInput, { target: { value: '', name: 'firstname' } });
 
       expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
       expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
-        fieldValidation.name,
+        'firstname',
+        'Enter your first name',
       );
     });
 
-    it('should update errors for frontend validations', () => {
+    it('should update first name field error for frontend validations', () => {
+      props.name = 'firstname';
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      const nameInput = container.querySelector('input#name');
-      fireEvent.blur(nameInput, { target: { value: 'https://invalid-name.com', name: 'name' } });
+      const firstNameInput = container.querySelector('input#firstname');
+      fireEvent.blur(firstNameInput, { target: { value: 'https://invalid-name.com', name: 'firstname' } });
 
       expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
       expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
-        'Enter a valid name',
+        'firstname',
+        'Enter a valid first name',
       );
     });
 
-    it('should clear error on focus', () => {
+    it('should clear first name error on focus', () => {
+      props.name = 'firstname';
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      const nameInput = container.querySelector('input#name');
-      fireEvent.focus(nameInput, { target: { value: '', name: 'name' } });
+      const firstNameInput = container.querySelector('input#firstname');
+      fireEvent.focus(firstNameInput, { target: { value: '', name: 'firstname' } });
 
       expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
       expect(props.handleErrorChange).toHaveBeenCalledWith(
-        'name',
+        'firstname',
         '',
       );
     });
@@ -112,14 +113,16 @@ describe('NameField', () => {
       props = {
         ...props,
         shouldFetchUsernameSuggestions: true,
+        fullName: 'test test',
       };
+      props.name = 'lastname';
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      const nameInput = container.querySelector('input#name');
+      const lastNameInput = container.querySelector('input#lastname');
       // Enter a valid name so that frontend validations are passed
-      fireEvent.blur(nameInput, { target: { value: 'test', name: 'name' } });
+      fireEvent.blur(lastNameInput, { target: { value: 'test', name: 'lastname' } });
 
-      expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ name: 'test' }));
+      expect(store.dispatch).toHaveBeenCalledWith(fetchRealtimeValidations({ name: props.fullName }));
     });
 
     it('should clear the registration validation error on focus on field', () => {
@@ -134,14 +137,43 @@ describe('NameField', () => {
         },
       });
 
+      props.name = 'lastname';
       store.dispatch = jest.fn(store.dispatch);
       const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      const nameInput = container.querySelector('input#name');
+      const lastNameInput = container.querySelector('input#lastname');
+
+      fireEvent.focus(lastNameInput, { target: { value: 'test', name: 'lastname' } });
 
-      fireEvent.focus(nameInput, { target: { value: 'test', name: 'name' } });
+      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('lastname'));
+    });
+
+    it('should run last name field validation when onBlur is fired', () => {
+      props.name = 'lastname';
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
 
-      expect(store.dispatch).toHaveBeenCalledWith(clearRegistrationBackendError('name'));
+      const lastNameInput = container.querySelector('input#lastname');
+      fireEvent.blur(lastNameInput, { target: { value: '', name: 'lastname' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'lastname',
+        'Enter your last name',
+      );
+    });
+
+    it('should update last name field error for frontend validation', () => {
+      props.name = 'lastname';
+      const { container } = render(routerWrapper(reduxWrapper(<IntlNameField {...props} />)));
+
+      const lastNameInput = container.querySelector('input#lastname');
+      fireEvent.blur(lastNameInput, { target: { value: 'https://invalid-name.com', name: 'lastname' } });
+
+      expect(props.handleErrorChange).toHaveBeenCalledTimes(1);
+      expect(props.handleErrorChange).toHaveBeenCalledWith(
+        'lastname',
+        'Enter a valid last name',
+      );
     });
   });
 });

src/register/RegistrationFields/NameField/validator.js

@@ -9,12 +9,16 @@ export const HTML_REGEX = /<|>/u;
 // regex from backend
 export const INVALID_NAME_REGEX = /https?:\/\/(?:[-\w.]|(?:%[\da-fA-F]{2}))*/g;
 
-const validateName = (value, formatMessage) => {
+const validateName = (value, fieldName, formatMessage) => {
   let fieldError;
   if (!value.trim()) {
-    fieldError = formatMessage(messages['empty.name.field.error']);
+    fieldError = fieldName === 'lastname'
+      ? formatMessage(messages['empty.lastname.field.error'])
+      : formatMessage(messages['empty.firstname.field.error']);
   } else if (URL_REGEX.test(value) || HTML_REGEX.test(value) || INVALID_NAME_REGEX.test(value)) {
-    fieldError = formatMessage(messages['name.validation.message']);
+    fieldError = fieldName === 'lastname'
+      ? formatMessage(messages['lastname.validation.message'])
+      : formatMessage(messages['firstname.validation.message']);
   }
   return fieldError;
 };

src/register/RegistrationPage.jsx

@@ -120,9 +120,11 @@ const RegistrationPage = (props) => {
         setErrorCode(prevState => ({ type: TPA_AUTHENTICATION_FAILURE, count: prevState.count + 1 }));
       }
       if (pipelineUserDetails && Object.keys(pipelineUserDetails).length !== 0) {
-        const { name = '', username = '', email = '' } = pipelineUserDetails;
+        const {
+          firstname = '', lastname = '', username = '', email = '',
+        } = pipelineUserDetails;
         setFormFields(prevState => ({
-          ...prevState, name, username, email,
+          ...prevState, firstname, lastname, username, email,
         }));
         dispatch(setUserPipelineDataLoaded(true));
       }
@@ -321,14 +323,22 @@ const RegistrationPage = (props) => {
             />
             <Form id="registration-form" name="registration-form">
               <NameField
-                name="name"
-                value={formFields.name}
+                name="firstname"
+                value={formFields.firstname}
+                handleChange={handleOnChange}
+                handleErrorChange={handleErrorChange}
+                errorMessage={errors.firstname}
+                floatingLabel={formatMessage(messages['registration.firstname.label'])}
+              />
+              <NameField
+                name="lastname"
+                value={formFields.lastname}
                 shouldFetchUsernameSuggestions={!formFields.username.trim()}
+                fullName={`${formFields.firstname} ${formFields.lastname}`}
                 handleChange={handleOnChange}
                 handleErrorChange={handleErrorChange}
-                errorMessage={errors.name}
-                helpText={[formatMessage(messages['help.text.name'])]}
-                floatingLabel={formatMessage(messages['registration.fullname.label'])}
+                errorMessage={errors.lastname}
+                floatingLabel={formatMessage(messages['registration.lastname.label'])}
               />
               <EmailField
                 name="email"

src/register/RegistrationPage.test.jsx

@@ -64,13 +64,13 @@ describe('RegistrationPage', () => {
       marketingEmailsOptIn: true,
     },
     formFields: {
-      name: '', email: '', username: '', password: '',
+      firstname: '', lastname: '', email: '', username: '', password: '',
     },
     emailSuggestion: {
       suggestion: '', type: '',
     },
     errors: {
-      name: '', email: '', username: '', password: '',
+      firstname: '', lastname: '', email: '', username: '', password: '',
     },
   };
 
@@ -134,7 +134,8 @@ describe('RegistrationPage', () => {
   });
 
   const populateRequiredFields = (getByLabelText, payload, isThirdPartyAuth = false) => {
-    fireEvent.change(getByLabelText('Full name'), { target: { value: payload.name, name: 'name' } });
+    fireEvent.change(getByLabelText('First name'), { target: { value: payload.firstname, name: 'firstname' } });
+    fireEvent.change(getByLabelText('Last name'), { target: { value: payload.lastname, name: 'lastname' } });
     fireEvent.change(getByLabelText('Public username'), { target: { value: payload.username, name: 'username' } });
     fireEvent.change(getByLabelText('Email'), { target: { value: payload.email, name: 'email' } });
 
@@ -152,7 +153,8 @@ describe('RegistrationPage', () => {
     });
 
     const emptyFieldValidation = {
-      name: 'Enter your full name',
+      firstname: 'Enter your first name',
+      lastname: 'Enter your last name',
       username: 'Username must be between 2 and 30 characters',
       email: 'Enter your email',
       password: 'Password criteria has not been met',
@@ -169,7 +171,8 @@ describe('RegistrationPage', () => {
       window.location = { href: getConfig().BASE_URL, search: '?next=/course/demo-course-url' };
 
       const payload = {
-        name: 'John Doe',
+        firstname: 'John',
+        lastname: 'Doe',
         username: 'john_doe',
         email: 'john.doe@gmail.com',
         password: 'password1',
@@ -192,7 +195,8 @@ describe('RegistrationPage', () => {
       jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
 
       const formPayload = {
-        name: 'John Doe',
+        firstname: 'John',
+        lastname: 'Doe',
         username: 'john_doe',
         email: 'john.doe@example.com',
         country: 'Pakistan',
@@ -228,7 +232,8 @@ describe('RegistrationPage', () => {
       jest.spyOn(global.Date, 'now').mockImplementation(() => 0);
 
       const payload = {
-        name: 'John Doe',
+        firstname: 'John',
+        lastname: 'Doe',
         username: 'john_doe',
         email: 'john.doe@gmail.com',
         password: 'password1',
@@ -611,7 +616,8 @@ describe('RegistrationPage', () => {
           registrationFormData: {
             ...registrationFormData,
             formFields: {
-              name: 'John Doe',
+              firstname: 'John',
+              lastname: 'Doe',
               username: 'john_doe',
               email: 'john.doe@yopmail.com',
               password: 'password1',
@@ -625,13 +631,15 @@ describe('RegistrationPage', () => {
 
       const { container } = render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
 
-      const fullNameInput = container.querySelector('input#name');
+      const firstNameInput = container.querySelector('input#firstname');
+      const lastNameInput = container.querySelector('input#lastname');
       const usernameInput = container.querySelector('input#username');
       const emailInput = container.querySelector('input#email');
       const passwordInput = container.querySelector('input#password');
       const emailSuggestion = container.querySelector('.email-suggestion-alert-warning');
 
-      expect(fullNameInput.value).toEqual('John Doe');
+      expect(firstNameInput.value).toEqual('John');
+      expect(lastNameInput.value).toEqual('Doe');
       expect(usernameInput.value).toEqual('john_doe');
       expect(emailInput.value).toEqual('john.doe@yopmail.com');
       expect(passwordInput.value).toEqual('password1');
@@ -752,7 +760,8 @@ describe('RegistrationPage', () => {
           thirdPartyAuthContext: {
             ...initialState.commonComponents.thirdPartyAuthContext,
             pipelineUserDetails: {
-              name: 'John Doe',
+              firstname: 'John',
+              lastname: 'Doe',
               username: 'john_doe',
               email: 'john.doe@example.com',
             },
@@ -783,7 +792,8 @@ describe('RegistrationPage', () => {
           registrationFormData: {
             ...registrationFormData,
             formFields: {
-              name: 'John Doe',
+              firstname: 'John',
+              lastname: 'Doe',
               username: 'john_doe',
               email: 'john.doe@example.com',
             },
@@ -803,7 +813,8 @@ describe('RegistrationPage', () => {
             ...initialState.commonComponents.thirdPartyAuthContext,
             currentProvider: 'Apple',
             pipelineUserDetails: {
-              name: 'John Doe',
+              firstname: 'John',
+              lastname: 'Doe',
               username: 'john_doe',
               email: 'john.doe@example.com',
             },
@@ -815,7 +826,8 @@ describe('RegistrationPage', () => {
 
       render(routerWrapper(reduxWrapper(<IntlRegistrationPage {...props} />)));
       expect(store.dispatch).toHaveBeenCalledWith(registerNewUser({
-        name: 'John Doe',
+        firstname: 'John',
+        lastname: 'Doe',
         username: 'john_doe',
         email: 'john.doe@example.com',
         country: 'PK',